我想在 Canvas 上绘制多个图像(背景,背景上的另一个图像, 然后在该图像上再次出现另一个图像), 但有时它会加载图像,有时不会, 我使用 setTimeout 来延迟绘制图像和加载,但它仍然不起作用。
if(somecondition)
{
//background image is 70kb
//image on background is 65kb
img3.src = "Image path"; //images is almost 2kb
img4.src = "Image path"; //images is almost 2kb
img5.src = "Image path"; //images is almost 2kb
img6.src = "Image path"; //images is almost 2kb
setTimeout(function()
{
img3.onload = function()
{
context.drawImage(img3, 272, 139, 172, 31);
}
},1000);
console.log("Linesss2 > 4 "+lines2);
bottomY = 290+((lines1-5)*10);
middleHeight = bottomY - 170;
setTimeout(function()
{
img4.onload = function()
{
context.drawImage(img4, 272, 170, 172, middleHeight); ///272
}
img6.onload = function()
{
context.drawImage(img6, 272, bottomY, 172, 71);
}
},1000);
}
var metrics1 = context.measureText(canvasText1);
var testWidth1 = metrics1.width;
var metrics2 = context.measureText(canvasText2);
var testWidth2 = metrics2.width;
context.fillText(canvasText1, 169.5-(testWidth/2), y-20);
context.fillText(canvasText2, 169.5-(testWidth/2), y-20);
wrapTextForCanvas1(context, canvasText1, 50, 180);
wrapTextForCanvas2(context, canvasText2, 260, 180);
}
最佳答案
因此,您不想运行任意超时,您希望在每个图像加载时收到通知。这样您就可以在开始尝试使用它们之前确定它们都已加载。只需设置每个图像的 onload 回调,使其递增一个计数器。当该计数器达到您必须加载的图像数量时,它们就全部完成了,您可以开始使用它们了。
我最近回答了另一个问题。修改后的代码见这里: http://jsfiddle.net/enhzflep/RLP5Y/
或此处为问题本身:Images from previous functions are not drawn in the background (Canvas)
关于javascript - canvas.drawImage 没有绘制所有图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12852555/