canvas 多张图片绘制层级问题

2020-12-16  本文已影响0人  Simple_Learn

//canvas图片绘制
/**
* 1.必须等图片加载完成后才能使用drawImage方法
* 2.Image默认不支持访问跨域资源,必须手动指定crossOrigin属性,才可以跨域访问图片
*/
https://www.w3school.com.cn/tags/canvas_drawimage.asp

    addImage(src) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.crossOrigin = "anonymous";
        img.onload = () => {
          resolve(img);
        };
        img.onerror = () => {
          reject();
        };
        img.src = src;
        if (img.complete) {
          resolve(img);
        }
      });
    }

    this.addImage(src).then((img) => {
        this.ctx.drawImage(img, 0, 0, img.width, img.height);
        // 在这之后才能继续绘制其他图片
        this.addImage(xxx);
    });

图片依次绘制 从最底层到最高层。

上一篇 下一篇

猜你喜欢

热点阅读