CanvasContext.drawImage收藏我的收藏
收藏
我的收藏
基础库 1.0.0 开始支持本方法,这是一个同步方法。
注意:该接口已停止维护,建议使用 Canvas 组件 V2。
绘制图像到画布。
语法
CanvasContext.drawImage(imageResource, sx, sy, sw, sh, dx, dy, dw, dh)
参数说明
imageResource
类型 | 默认值 | 必填 | 说明 | 最低支持版本 |
---|---|---|---|---|
string | 是 | 图片资源地址。支持 Base64 格式、本地、线上地址, 线上 cdn 需返回头 | 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 |
返回值
无
扫码体验
请使用字节宿主APP扫码
代码示例
<!-- 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
该文档是否有帮助?