动态drawImage带有for loops

Dynamical drawImage with for loops

本文关键字：loops for 带有 drawImage 动态      更新时间：2023-09-26

我正试图从图像中动态创建一个包含2个循环的画布，为了使设计效果"逐行"，我设置了一个超时。

问题是，有一段时间，浏览器会冻结，过一段时间就会显示出完整的图像，而不会想到​​动态结构。这是我的代码：

$(document).ready(function(){
var canv = document.getElementById('myCanvas');
var ctx = canv.getContext('2d');
var img=new Image();
img.src='img/myImage.jpg';
img.onload= function(){
for(var i=0;i<img.width;i++){
for(var j=0;j<img.height;j++){
setTimeout(function(){ctx.drawImage(img,0,0,i,j,0,0,i,j)},10);
   }
 }
}
});

有什么想法吗？

如果你想要逐行效果，你不必使用画布，因为有一个更简单的解决方案：
只需在具有height: 0和overflow: hidden的容器中使用<img />。

然后逐行增加容器的高度。这很简单：

HTML:

<div id="container">
    <img src="http://api.jquery.com/jquery-wp-content/themes/jquery/images/logo-jquery.png" />
</div>

和jQuery:

$(document).ready(function () {
    window.setInterval(function(){
        $("#container").css("height", "+=1");
    }, 100);
});

现场演示：http://jsfiddle.net/jkyvk/

问题是i和j被用作闭包变量，因此在执行超时函数时会有最后的值。

要解决此问题，请使用IIFE:引入一个不错的范围

$(document).ready(function(){
var canv = document.getElementById('myCanvas');
var ctx = canv.getContext('2d');
var img=new Image();
img.src='img/myImage.jpg';
img.onload= function(){
for(var i=0;i<img.width;i++){
for(var j=0;j<img.height;j++){
   (function(){
      var _i = i; // capture the current value of i
      var _j = j;
      setTimeout(function(){ctx.drawImage(img,0,0,_i,_j,0,0,_i,_j)},10);
   })();  // that's the IFFE
   }
 }
}
});

此外，您可能应该尝试一个非常数值的超时。所有setTimeOuts几乎同时初始化，因此它们将在一个接一个之后立即执行。试试(i + j) * 5之类的东西。

这是一个稍微修改过的实际示例。

相关文章：