CanvasContext.drawImage

使用顺序:drawImage(imageResource, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight)

解释:绘制图像到画布。

# 方法参数

参数名 属性 必填 默认值 说明
imageResource String 所要绘制的图片资源 。
dx Number 图像的左上角在目标 canvas 上 X 轴的位置。
dy Number 图像的左上角在目标 canvas 上 Y 轴的位置 。
dWidth Number 在目标画布上绘制图像的宽度,允许对绘制的图像进行缩放 。
dHeight Number 在目标画布上绘制图像的高度,允许对绘制的图像进行缩放 。
sx Number 源图像的矩形选择框的左上角 X 坐标。
sy Number 源图像的矩形选择框的左上角 Y 坐标。
sWidth Number 源图像的矩形选择框的宽度 。
sHeight Number 源图像的矩形选择框的高度 。

# 示例

扫码体验
重新加载
请使用百度APP扫码

# 图片示例

# 代码示例 1

    <canvas canvas-id="myCanvas" class="myCanvas" />
    
    Page({
        onLoad() {
            const canvasContext = swan.createCanvasContext('myCanvas');
            canvasContext.drawImage('https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png', 0, 0, 150, 100);
            canvasContext.draw();
        }
    });
    

    # 代码示例 2: 把用户正方形图片绘制成圆形

      <canvas canvas-id="myCanvas" class="myCanvas" />
      
      Page({
          onLoad() {
              const context = swan.createCanvasContext('myCanvas')
              context.beginPath(); 
              context.arc(110, 60, 30, 0, 2 * Math.PI);
              context.clip();
              context.drawImage('/image/faceDetect.png', 80,30,60,60); // 推进去图片,这里注意头像坐标要在圆形区域内
              context.draw();
          }
      })