问题描述
我找到了在画布上绘制多个图像的方法 How to add multiple images to html5 canvas
以及在页面上绘制多个画布的方法 Draw Multiple Canvas on a single page
但是当我尝试绘制多个画布时,每个画布都包含多个图像加载,因此不起作用。 只有最后一个画布可以加载图像,而其他画布则不能。 您能帮我解决这个问题吗? 我的代码是
enter code here
var CanvasList = document.getElementsByClassName("listCanvas");
for (var i = 0; i < CanvasList.length; i++) {
var canvas = CanvasList[i]
ctx = canvas.getContext('2d');
var img_Original = new Image();
img_Original.src = '../Images/hizume.jpg';
img_Original.onload = function () {
canvas.height = img_Original.height;
canvas.width = img_Original.width;
ctx.drawImage(img_Original,0);
};
var strPart = CanvasList [i] .id;
do {
var index = strPart.indexOf(",")
var partGet = strPart.substring(0,index);
if (partGet.length == 1) {
partGet = "0" + partGet;
}
var source = "../Images/hizume_" + partGet + "_multi.png";
var nextImg = new Image();
nextImg.src = source;
Img.push(nextImg);
strPart = strPart.substring(index + 1);
}
while (strPart.length > 0);
partCount = Img.length;
Img[partCount - 1].onload = function () {
ctx.drawImage(img_Original,0);
for (var j = 0; j < partCount; j++) {
ctx.drawImage(Img[j],0);
}
}
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)