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

返回值

无

扫码体验

代码示例

开发者工具中预览

<!-- 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。