canvas2d 绘制分享海报,二次加载有时候会显示空白,怎么解决?
canvas2d 绘制分享海报,图片有先加载成功再绘制,其中用到了clip进行头像圆形切割,不断加载有时候会显示空白,显示空白时圆形切割有时候有效(显示成功切割的圆形头像)有时候无效(显示四方形原头像),加载显示正常时圆形切割则正常,怎么解决? 测试工具:微信开发者工具,真机测试都会出现这个问题 版本库:2.11(最新) // 绘制背景图片
let background_img = await this.background_img;
const bgImage = canvas.createImage();
bgImage.src = background_img;
bgImage.onload = async()=>{
await context.drawImage(bgImage, 0, 0, bgImage.width*dpr, bgImage.height*dpr, 0, 0, canvas.width, canvas.height*0.8);
};
// 二维码
let share_code_img = await this.share_code_img;
const shareImage = canvas.createImage();
shareImage.src = share_code_img;
shareImage.onload = ()=>{
context.drawImage(shareImage, 0, 0, shareImage.width*dpr,shareImage.height*dpr, canvas.width/dpr-canvas.height/dpr*0.14, canvas.height/dpr*0.81, canvas.height*0.12,canvas.height*0.12);
};
context.save();
// 头像
context.beginPath(); //开始创建一个路径
let radius = canvas.height/dpr*0.12/2;
context.arc(radius*3/2,canvas.height/dpr*0.9, radius, 2 * Math.PI, false); //画一个圆形裁剪区域
context.stroke();
context.clip();
let headicon_img = await this.headicon_img;
const headImage = canvas.createImage();
headImage.src = headicon_img;
headImage.onload = ()=>{
context.drawImage(headImage, 0, 0, headImage.width*dpr,headImage.height*dpr,radius/2,canvas.height/dpr*0.9-radius,radius*2*dpr,radius*2*dpr);
};
context.restore();
[图片][图片]