javascript - 使用 Canvas 绘制 spritesheet 时遇到错误

Question

我正在通过构建一个步行人物来练习 Canvas，该人物由精灵表上的 30 个精灵组成。在以下网站上检查。

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

先感谢您！

Answer 1

我检查了您网站上的代码，这是问题所在：首次运行时，您的 init function() 中的值未填充 ctx。

您的 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;
}