2

私は HTML5 と canvas 要素に不慣れで、ここ数週間、それをよりよく理解しようと努めてきました。とにかくUncaught TypeError: Type error、赤い四角をこのコードhttp://jsfiddle.net/kmHZt/10/からこの画像http://i.imgur.com/k73egsW.pngに変更しようとすると、エラーが発生します。しかし、私がしようとすると、いつもそれが得られUncaught TypeError: Type errorます。これが私が現在持っているコードですhttp://jsfiddle.net/cCDFs/。

より良い説明が必要な場合は、お尋ねください。

4

2 に答える 2

5

に URL を渡そうとしてdrawImageいますが、これはできません。画像の読み込みが完了した後で、代わりに画像要素を読み込んで渡す必要があります。

この記事には、私が説明していることの例があります。

コードは次のようになります。

var img = new Image();
img.onload = function() {
    context.drawImage(img, 2, 2);
}
img.src = 'http://i.imgur.com/k73egsW.png';

実際、タイルを読み込んで描画するとき、コードはすでにそれを行っています。

于 2013-03-01T20:18:43.330 に答える
0

drawImage に渡す必要がある最初の引数は、文字列ではなく、Image または Canvas オブジェクトです。

コードで何を達成しようとしているのかよくわかりませんでしたが、関数への draw() 呼び出しを次のようなコードに置き換えると:

var otherImageObj = new Image();
otherImageObj.onload = function() {
        context.clearRect(0,0,canvas.width, canvas.height);
        for (y = 0; y <= vHeight; y++) {
            for (x = 0; x <= vWidth; x++) {
                theX = x * 32;
                theY = y * 32;
                context.drawImage(tiles[board[y+vY][x+vX]], theX, theY, 32, 32);
            }
        }
        context.drawImage(otherImageObj, 2, 2);

};
otherImageObj.src = "http://i.imgur.com/k73egsW.png";

あなたのコードは実際には機能しますが、画像に対して「403 (Forbidden)」エラーが発生します。

于 2013-03-01T20:24:27.823 に答える