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

行ごとの効果が必要な場合は、canvas を使用する必要はありません。より簡単な解決策がある
ためです。<img />height: 0overflow: hidden

次に、コンテナの高さを 1 行ずつ増やします。次のように簡単です。

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

問題は、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です。

于 2013-08-04T07:30:08.733 に答える