CanvasContext.drawImage
收藏
我的收藏

基础库 1.0.0 开始支持本方法,这是一个同步方法。

注意:该接口已停止维护,建议使用 Canvas 组件 V2

绘制图像到画布。

语法

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

返回值

扫码体验

请使用字节宿主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

该文档是否有帮助?