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