0

我知道在 stackoverflow 上已经有很多类似的问题，但我仍然不知道该怎么做。我只想旋转球纹理。用计时器调用draw：

var canvas;
var ctx;
var width;
var height;
var ready;
var textures;
var loadIndex;
var loadCount;
var keyCodes;
var mouseLoc;

var playerX;
var playerY;
var playerVelocity;

function init() {
    canvas = document.getElementById('game');
    ctx = canvas.getContext("2d");
    width = canvas.width;
    height = canvas.height;
    textures = [];
    loadingCount = 0;
    keyCodes = [];
    mouseLoc = {};

    playerX = 0;
    playerY = 0;
    playerVelocity = 6;

    textures['Background'] = loadTexture('./textures/Background.png');
    textures['Ball'] = loadTexture('./textures/Ball.png');

    setInterval(function(){ 
        if(loadingCount == 0) {
            update();
            draw();
        }
    }, 50);
}

function update(){
    if(keyCodes[37])
        playerX -= playerVelocity;
    if(keyCodes[38])
        playerY -= playerVelocity;
    if(keyCodes[39])
        playerX += playerVelocity;
    if(keyCodes[40])
        playerY += playerVelocity;
}

function draw() {
    //ctx.clearRect(0, 0, width, height);
    //ctx.beginPath();
    drawBackground();
    drawPlayer();
    //ctx.closePath();
    //ctx.fill();
}

function drawBackground(){
    ctx.drawImage(textures['Background'], 0, 0, width, height);
}

function drawPlayer(){
    ctx.save();
    ctx.rotate(0.17);
    ctx.drawImage(textures['Ball'], playerX, playerY, 100, 100);
    ctx.restore();
}

function loadTexture(src){
    var image = new Image();
    image.src = src;
    loadingCount++;
    image.onload = function(){
        loadingCount--;
    };
    return image;
}

document.onkeydown = function(evt){
    keyCodes[evt.keyCode] = true;
    evt.returnValue = false;
}
document.onkeyup = function(evt){
    keyCodes[evt.keyCode] = false;
}

document.onmousemove = function(evt){
    mouseLoc.x = evt.layerX;
    mouseLoc.y = evt.layerY;
}
document.onmousedown = function(evt){
    mouseLoc.down = true;
}
document.onmouseup = function(evt){
    mouseLoc.down = false;
}

init();
4

3 回答 3

1

您只需要保存和恢复画布的状态（状态机）

function drawPlayer(){
    ctx.save();
    ctx.rotate(0.17);
    ctx.drawImage(textures['Ball'], playerX, playerY, 100, 100);
    ctx.restore();
}
于 2012-10-05T17:38:30.127 回答
1

假设您想给出小球继续旋转的错觉，您应该为绘制的每一帧增加旋转角度。

如所写，您的代码将在每帧上为球提供 0.17 弧度的固定旋转。

var frame = 0;

function drawPlayer() {
    ctx.save();
    ctx.rotate(0.17 * frame);
    ...
    ctx.restore();
}

function draw() {
    ++frame;
    drawPlayer();
    ...
}
于 2012-10-05T17:48:44.337 回答
1

您想使用增量时间来计算旋转距离。也就是说，自上一帧以来经过的时间。如果您的浏览器打嗝并在这里或那里丢失帧，这将使您的旋转更平滑。

所以存储每一帧的时间，这样你就可以在帧之间进行比较，并将你的旋转速度设置为每秒弧度。

于 2012-10-06T03:48:41.693 回答