如何解决在html5 canvas上绘制大量图像
| 我在将大量图像加载到html canvas元素时遇到问题。基本上,我想做的是获取数组中每个图像的一小部分(1px w,256px h),并在画布上用所有这些较小的图像组成一张新图片。 当我运行此代码时,我正在打印屏幕上的所有图像。但是,当我使用for循环运行它时,图像保持白色。function addToCanvas()
{
drawingCanvas = document.getElementById(\'myDrawingCanvas\');
context = drawingCanvas.getContext(\'2d\');
//for(imgNo=0;imgNo<256;imgNo++){
var imgObj = new Image();
imgObj.onload = function () {
context.drawImage(imgObj,1,256,0+(imgNo),256);
}
imgObj.src = imgs[imgNo];
imgNo++;
//}
}
解决方法
这是一个关闭问题,与画布无关。循环到位后,将围绕
imgNo
变量而不是其值创建一个闭合。因此,当这些事件处理程序最终触发时,循环结束的机会非常好,所有的imgNo
等于256。
这是一种解决方法:
function addToCanvas()
{
drawingCanvas = document.getElementById(\'myDrawingCanvas\');
context = drawingCanvas.getContext(\'2d\');
for(imgNo=0;imgNo<256;imgNo++){
var imgObj = new Image();
imgObj.onload = (function(i) {
return function () {
context.drawImage(imgObj,1,256,0+(i),256);
}
})(imgNo);
imgObj.src = imgs[imgNo];
imgNo++;
}
}
我正在创建一个返回函数的匿名函数,它返回事件处理程序。然后立即使用imgNo \的当前值调用它。这导致它在一个新变量中捕获其当前值,并将该新变量传递给事件处理程序。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。