使用Canvas绘制spritesheet时遇到错误

Question

我正在练习画布，通过建立一个行走的人物，这是由30个精灵在精灵板上。在following site上检查这一点。

但正如你所看到的，它看起来并不流畅。对于clearRect和drawImage，我得到了2个未定义错误的方法无法调用。

提前谢谢你！

Answer 1

我检查了你的站点上的代码，问题是: ctx在第一次运行时没有用init函数()中的值填充。

draw()函数在图像加载到header中时启动，header是在加载body之前加载的。

对于某些区域的图像偏向一侧，请检查数学。很可能是你裁剪错了地方

编辑:以下是脚本中应该包含的内容，它保留在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;
}