0

我正在尝试从图像中动态创建具有 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);
   }
 }
}
});

有任何想法吗？

4

2 回答 2

0

如果您想要逐行效果，则不必使用画布，因为有一个更简单的解决方案：
只需使用具有和<img />的容器内部。height: 0overflow: 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/

于 2013-08-04T07:39:07.627 回答
0

问题是iandj被用作闭包变量，因此在执行超时函数时将具有它们的最后一个值。

要解决此问题，请使用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。

这是一个稍作修改的现场示例。

于 2013-08-04T07:30:08.733 回答