CanvasContext.drawImage
收藏我的收藏
收藏基础库 1.0.0 开始支持本方法，这是一个同步方法。
绘制图像到画布。
语法
CanvasContext.drawImage(imageResource, sx, sy, sw, sh, dx, dy, dw, dh)
参数说明
imageResource
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
string | | 是 | 图片资源地址。支持 Base64 格式、本地、线上地址，线上 cdn 需返回头 Access-Control-Allow-Origin: * | 1.0.0 |
sx
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
number | | 是 | 图像左上角 x 坐标 | 1.0.0 |
sy
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
number | | 是 | 图像左上角 y 坐标 | 1.0.0 |
sw
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
number | 图像宽度 | 否 | 需要绘制到画布中的图像宽度 | 1.0.0 |
sh
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
number | 图像高度 | 否 | 需要绘制到画布中的图像高度 | 1.0.0 |
dx
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
number | 0 | 否 | 图片的左上角在目标 canvas 上 x 轴的位置 | 1.0.0 |
dy
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
number | 0 | 否 | 图片的左上角在目标 canvas 上 y 轴的位置 | 1.0.0 |
dw
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
number | 图片宽度 | 否 | 在目标画布上绘制图片的宽度，允许对绘制的图片进行缩放 | 1.0.0 |
dh
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
number | 图片高度 | 否 | 在目标画布上绘制图片的高度，允许对绘制的图片进行缩放 | 1.0.0 |
返回值
无
扫码体验
代码示例
<!-- index.ttml --> <canvas canvas-id="myCanvas"></canvas>
// index.js Page({ onLoad: function (options) { const canvasCtx = tt.createCanvasContext("myCanvas"); canvasCtx.drawImage( "https://s3.pstatp.com/toutiao/static/img/logo.201f80d.png", 10, 10, 250, 80 ); canvasCtx.draw(); }, });
Bug & Tip
- •Tip：本 API 仅适用于组件 V1
