2

JavaScriptで画像とキャンバスを操作することを学ぼうとしています。なぜできないのか疑問に思っています：

var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg'; 
         var can = document.getElementById('canvas');
         var ctx = can.getContext('2d');
         var img = new Image();
         img.onload = function(){

         }
         img.src =urlimg ;
         can.width = img.width;
         can.height = img.height;
         ctx.drawImage(img, 0, 0, img.width, img.height);
         $('#image1').attr('src', img.src);

そして、これをしなければなりません:

var urlimg='http://images.aviary.com/imagesv5/feather_default.jpg'; 
         var can = document.getElementById('canvas');
         var ctx = can.getContext('2d');
         var img = new Image();
         img.onload = function(){
             can.width = img.width;
             can.height = img.height;
             ctx.drawImage(img, 0, 0, img.width, img.height);
         }
         img.src =urlimg ;
         $('#image1').attr('src', img.src);

画像の読み込み時間によるものですか？

既存のオブジェクト画像からキャンバスを作成できますか?

ありがとう。

4

1 に答える 1

1

画像の読み込み時間によるものですか？

はい、部分的にはありますが、主に画像の読み込みが非同期であるため、画像の読み込み中に次のコード行がすぐに実行されます。完了時にイベントが発生したことを知らせるため。

既存のオブジェクト画像からキャンバスを作成できますか?

いいえ（直接ではありません）、キャンバスに画像を描画して初期化できます（すでに行っているように）：

ctx.drawImage(imageElement, 0, 0, width, height);
于 2013-05-19T21:48:08.590 に答える