Question

我正在通过构建一个行走的人物来练习画布，这个人物在spritesheet上由30个精灵组成。请在following site上查看。

但正如你所看到的那样看起来并不流利。我得到2无法为clearRect和drawImage调用未定义错误的方法。

提前谢谢！

Answer 1

我检查了您网站上的代码，问题在于：首次运行时，init函数（）中的值不会填充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;
}

通过使用Canvas绘制spritesheet来解决错误

1 个答案: