Question

我有这样的代码可以工作，但实际上不是，这是我的代码：

var c = document.getElementById ("screen");
var ctx = c.getContext ("2d");

var characterX = 0;
var characterY = 0;
var srcX;
var srcY;
var sheetHeight = 280;
var sheetWidth = 864;
var frameCount = 8;
var cols = 8;
var rows = 2;
var character = new Image;
character.src = "spritesheet.png";
var width = sheetWidth / cols;
var height = sheetHeight / rows;
var currentFrame = 0;

function updateFrame() {
    currentFrame = ++currentFrame % cols;
    srcX = currentFrame * width;
    srcY = 0;
}

function drawCharacter() {
    ctx.clearRect (0, 0, c.width, c.height);
    updateFrame();
    ctx.drawImage (character, srcX, srcY, width, height, characterX, characterY, width, height)
}

setInterval (function() {
    drawCharacter();
}, 100);

function draw() {

    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

基本上，当我运行此代码时，会立即绘制字符，这是我不理解的，因为我没有调用drawCharacter（）;在draw（）;中但是，它不应该显示字符。如果我写这个

function draw() {
    drawCharacter();

    requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

然后字符运行如此之快，由于某种原因setInterval不再起作用，有人可以帮我解决这个问题吗？

Answer 1

在第一个版本中，直接绘制字符不是因为draw函数或requestAnimationFrame，而是因为setInterval，它每100ms重绘一次字符。

在第二个版本中，您的字符实际上经常更新，因为您在自己的drawCharacter方法中调用了draw方法中的requestAnimationFrame：setInterval可以正常工作，但是由于它已经在requestAnimationFrame中进行了非常频繁的更新，因此您看不到100ms的间隔。

要修复您的代码，我认为最好是删除setInterval或requestAnimationFrame。

如果保留setInterval，则按照现在的编码，可以通过修改为setInterval方法设置的时间来更改字符的速度。

如果您希望尽可能频繁地刷新角色的位置，但又不想太快地移动，则可能需要改用requestAnimationFrame并重新考虑updateFrame方法来移动角色，具体取决于花费的时间，而不仅仅是++ currentFrame。

requestAnimationFrame（）似乎不起作用

1 个答案: