九八云安全- CanvasContext.drawImage
- 方法参数
- 示例
- 图片示例
- 代码示例 1
- 代码示例 2：把用户正方形图片绘制成圆形
CanvasContext.drawImage
使用顺序：
drawImage(imageResource, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight)
解释：绘制图像到画布。
Web 态说明： 由于 Web 态遵循浏览器对 W3C 标准的实现程度，因此使用此 API 时如果只传入 imageResource、dx 和 dy 三个参数，就会在画布指定位置绘制原图。Web 态最终效果会跟 iOS 端小程序保持一致，与 Android 端小程序有差异，建议开发者按照参数说明中所有参数必填的方式来使用此 API。
方法参数
| 参数名 | 属性 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
|
imageResource |
String |
是 |
所要绘制的图片资源（外联需要使用 https）view |
|
|
dx |
Number |
是 |
图像的左上角在目标 canvas 上 X 轴的位置 |
|
|
dy |
Number |
是 |
图像的左上角在目标 canvas 上 Y 轴的位置 |
|
|
dWidth |
Number |
是 |
在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放 |
|
|
dHeight |
Number |
是 |
在目标画布上绘制图像的高度，允许对绘制的图像进行缩放 |
|
|
sx |
Number |
是 |
源图像的矩形选择框的左上角 X 坐标 |
|
|
sy |
Number |
是 |
源图像的矩形选择框的左上角 Y 坐标 |
|
|
sWidth |
Number |
是 |
源图像的矩形选择框的宽度 |
|
|
sHeight |
Number |
是 |
源图像的矩形选择框的高度 |
示例
扫码体验
代码示例
请使用百度APP扫码
图片示例
代码示例 1
在开发者工具中打开
在开发者工具中打开
在 WEB IDE 中打开
- SWAN
- JS
<canvas canvas-id="myCanvas" class="myCanvas" />
代码示例 2：把用户正方形图片绘制成圆形
在开发者工具中打开
在开发者工具中打开
在 WEB IDE 中打开
- JS
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();}})
