开发
API

CanvasContext.drawImage

基础库 1.0.0 开始支持本方法。

绘制图像到画布。

语法

CanvasContext.drawImage(imageResource, sx, sy, sw, sy, dx, dy, dw, dh)

参数说明

参数类型默认值必填说明最低支持版本
imageResourcestring图片资源地址。支持 Base64 格式、本地、线上地址,线上 cdn 需返回头 Access-Control-Allow-Origin: *1.0.0
sxnumber图像左上角 x 坐标1.0.0
synumber图像左上角 y 坐标1.0.0
swnumber图像宽度需要绘制到画布中的图像宽度1.0.0
shnumber图像高度需要绘制到画布中的图像高度1.0.0
dxnumber0图片的左上角在目标 canvas 上 x 轴的位置1.0.0
dynumber0图片的左上角在目标 canvas 上 y 轴的位置1.0.0
dwnumber图片宽度在目标画布上绘制图片的宽度,允许对绘制的图片进行缩放1.0.0
dhnumber图片高度在目标画布上绘制图片的高度,允许对绘制的图片进行缩放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

点击纠错
评价此篇文档