免费AI编程助手
CanvasContext.drawImage
2020-08-26 16:38 更新
使用顺序：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 | 是 | 源图像的矩形选择框的高度 |
示例
图片示例
代码示例 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：把用户正方形图片绘制成圆形
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();
}
})以上内容是否对您有帮助：
更多建议：