绘制图像到画布。 Web 态说明： 由于 Web 态遵循浏览器对 W3C 标准的实现程度，因此使用此 API 时如果只传入 imageResource、dx 和 dy 三个参数，就会在画布指定位置绘制原图。Web 态最终效果会跟 iOS 端小程序保持一致，与 Android 端小程序有差异，建议开发者按照参数说明中所有参数必填的方式来使用此 API。
CanvasContext.drawImage(String imageResource, Number dx, Number dy, Number dWidth, Number dHeight, Number sx, Number sy, Number sWidth, Number sHeight)
属性 | 类型 | 默认值 | 必填 | 说明 | 最低版本 |
|---|---|---|---|---|---|
| imageResource | String | 是 | 所要绘制的图片资源。外联图片：https://xxx ；本地图片：相对路径；临时文件：tempFilePath（bdfile://tmp/xxx ，可使用 xhs.downloadFile 获得） | ||
| dx | Number | 是 | 图像的左上角在目标 canvas 上 X 轴的位置 | ||
| dy | Number | 是 | 图像的左上角在目标 canvas 上 Y 轴的位置 | ||
| dWith | Number | 是 | 在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放 | ||
| dHeight | Number | 是 | 在目标画布上绘制图像的高度，允许对绘制的图像进行缩放 | ||
| sx | Number | 是 | 源图像的矩形选择框的左上角 X 坐标 | ||
| sy | Number | 是 | 源图像的矩形选择框的左上角 Y 坐标 | ||
| sWidth | Number | 是 | 源图像的矩形选择框的宽度 | ||
| sHeight | Number | 是 | 源图像的矩形选择框的高度 |
Page({
onLoad() {
const canvasContext = xhs.createCanvasContext('myCanvas');
canvasContext.drawImage('https://b.bdstatic.com/searchbox/icms/searchbox/img/api_logo.png', 0, 0, 150, 100);
canvasContext.draw();
}
});
Page({
onLoad() {
const context = xhs.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();
}
})