CanvasContext.drawImage
- 方法参数
- 示例

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 中打开

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