Question

我正在尝试使用图像中的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);
   }
 }
}
});

有什么想法吗？

Answer 1

问题是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的内容。

这是稍加修改的live example。

Answer 2

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

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

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/

带有for循环的动态drawImage

2 个答案: