CanvasContext.drawImage
- 方法参数
- 示例

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();
    }
})