javascript - Canvasでスプライトシートを描画してエラーが発生する

Question

スプライトシートに30個のスプライトでできたウォーキングフィギュアを作ってCanvasを練習しています。次のサイトでこれを確認してください。

しかし、ご覧のとおり、流暢には見えません。clearRectそして、との未定義エラーのメソッドを呼び出すことができませんdrawImage。

前もって感謝します！

Answer 1

あなたのサイトのコードを確認しましたが、問題は次のとおりです。ctx は、最初の実行時に init function() の値によって入力されません。

draw() 関数は、本文が読み込まれる前に読み込まれるヘッダーに画像が読み込まれるときに開始されます。

一部の領域で画像が横にずれていることについては、計算を確認してください。間違ったセクションをトリミングしている可能性があります

編集:これがスクリプトにあるはずのものです。それは Head タグに残ります

var ctx;
var count = 0;
var x;
var y;

var img = new Image();


function draw()
{
    requestAnimationFrame(draw);

    ctx.clearRect(0, 0, 171, 192);

    x = (count % 6 ) * (934/6);
    y = Math.floor(count / 6) * 192;
    ctx.drawImage(img, x, y, 934/6, 192, 0, 0, 171, 192);
    if(count == 29)
        count = 0;
    else
        count++;
}

function init()
{
    ctx = document.getElementById('canvas01').getContext("2d");
    img.src="img/sprites.jpg";
    img.onload = draw;
}