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"/>
    <button type="primary" bindtap="drawImage">点击上传</button>
    
    Page({
        drawImage () {
            const canvasContext = swan.createCanvasContext('myCanvas');
            swan.chooseImage({
                success: function(res){
                    canvasContext.drawImage(res.tempFilePaths[0], 0, 0, 150, 100);
                    canvasContext.draw();
                }
            });
        }
    });
    

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

    在开发者工具中预览效果

      Page({
          data: { },
          onLoad: function () {
              var contex = swan.createCanvasContext('myCanvas')
              contex.beginPath(); 
              contex.arc(110, 60, 30, 0, 2 * Math.PI);
              contex.clip();
              contex.drawImage('/image/faceDetect.png', 80,30,60,60); // 推进去图片,这里注意头像坐标要在圆形区域内
              contex.draw();
          }
      })