drawImage 绘制多张图片时层次顺序错乱
项目场景:
- canvas绘制结果页分享图片
问题描述:
-
目前需要使用 drawImage() 绘制多张图片
-
在 canvas 中是没有 z-index 这个属性的,只有绘制早的图片会显示在底层,绘制的图片显示在顶层。
downImage(ctx, img, x, y, w, h, canvas) {
let bgImg = new Image()
bgImg.src = img
img.onload = function () {
// 绘制图片
ctx.save()
ctx.drawImage(bgImg, x, y, w, h)
ctx.restore()
_this.shareUrl = canvas.toDataURL('image/jpeg')
};
}
根据上述代码,可以绘制多张图片在 canvas 标签当中,但是显示的层级会错乱。
原因分析:
- 因为 img.onload 属于异步加载了,所以哪张图片加载快就绘制顺序靠前。
解决方案:
- 在这个时候里,我们可以通过 Promise 对象返回一个同步的回调函数,让图片按顺序进行绘制。
downImage(ctx,