0

を使って絵を描きたいimage = new Image();

3 つの異なるイメージで新しい変数を定義します。

コードを実行すると、「Uncaught TypeError: Type error」というエラーが表示されます

可変画像に含まれるすべての画像を描画するコードを正しく修正する方法。

デモ jsFidle

どうもありがとう。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
    canvas.width = 1000;
    canvas.height = 500;
var BACKGROUND = {
  p1:  { url : "http://flora4me.com/im/b/1149.jpg",x:   5, y:   5, w: 1280, h: 480 , dx:0 ,dy:0   ,dw:500 ,dh:500 },
  p2:  { url : "http://flora4me.com/im/b/1119.jpg",x:   5, y: 495, w: 1280, h: 480 , dx:100 ,dy:100 ,dw:500 ,dh:500},
  p3:  { url : "http://vladfilippov.com/blog/2012-12-07/intro.jpg",x:   5, y: 985, w: 1280, h: 480 , dx:200 ,dy:200 ,dw:500 ,dh:500 }
  };
var  image;
for (var n in BACKGROUND)
{
    image = new Image();
    image.src = BACKGROUND[n].url;
    image.onload = function() {
    ctx.drawImage(image, BACKGROUND[n].x,BACKGROUND[n].y, BACKGROUND[n].w, BACKGROUND[n].h, BACKGROUND[n].dx, BACKGROUND[n].dy, BACKGROUND[n].dw, BACKGROUND[n].dh );   
        };
}
4

1 に答える 1

0

p3を繰り返し処理するのではなく、3 回描画していBACKGROUNDます。これは「タイプエラー」を説明しませんが。おそらく、オブジェクト プロトタイプにプロパティを追加するライブラリを使用しているでしょう。これらを修正するBACKGROUNDには、配列に切り替えて、次のようにループを作成します。

for (var n = 0; n < BACKGROUND.length; n++) {
    image = new Image();
    (function (x) {image.onload = function() {
            ctx.drawImage(image, BACKGROUND[x].x,BACKGROUND[x].y, BACKGROUND[x].w, BACKGROUND[x].h, BACKGROUND[x].dx, BACKGROUND[x].dy, BACKGROUND[x].dw, BACKGROUND[x].dh);   
        }
    }(n));
    image.src = BACKGROUND[n].url;
}

オブジェクトを保存することもできBACKGROUNDますが、その場合、次の最初の行で期待されるプロパティを確認する必要がありますfor..in。

if (!BACKGROUND.hasOwnProperty(n)) continue;
于 2013-02-15T13:10:07.787 に答える