美文网首页
canvas 多张图片绘制层级问题

canvas 多张图片绘制层级问题

作者: Simple_Learn | 来源:发表于2020-12-16 11:10 被阅读0次

//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);
    });

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

相关文章

网友评论

      本文标题:canvas 多张图片绘制层级问题

      本文链接:https://www.haomeiwen.com/subject/awsngktx.html