Canvas.createImage

收藏

我的收藏

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

创建一个图片对象。

语法

Canvas.createImage()

参数说明

无

返回值

Image

扫码体验

代码示例

开发者工具中预览

<!-- index.ttml -->
<canvas id="myCanvas" type="2d"></canvas>
<button type="primary" size="default" bindtap="createImage">createImage</button>

// index.js
let canvas, canvasCtx;
Page({
  onReady() {
    const query = tt.createSelectorQuery();
    query
      .select("#myCanvas")
      .fields({
        node: true,
      })
      .exec((res) => {
        canvas = res[0].node;
        canvasCtx = canvas.getContext("2d");
      });
  },
  createImage() {
    const image = canvas.createImage();
    image.onload = () => {
      canvasCtx.drawImage(image, 0, 0);
    };

    image.onerror = (err) => {
      console.log("## image error ##", err);
      tt.showModal({
        title: "error",
        content: `${JSON.stringify(err)}`,
      });
    };

    image.src = "https://s3.pstatp.com/toutiao/static/img/logo.271e845.png";
  },
});

Bug & Tip

• Tip：本 API 仅适用于<canvas> 组件 V2。