Html5 Canvas 旋转单个元素答案

【问题标题】：Html5 Canvas rotate single elementHtml5 Canvas 旋转单个元素
【发布时间】：2012-10-06 11:48:41
【问题描述】：

我知道在 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();

【问题讨论】：

您是否希望球在绘制的每个帧中旋转额外 0.17弧度？

标签： javascript html html5-canvas

【解决方案1】：

假设你想给球继续旋转的错觉，你应该增加每一帧的旋转角度。

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

var frame = 0;

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

function draw() {
    ++frame;
    drawPlayer();
    ...
}

【讨论】：

@karaxuna 我猜想你在我对你的问题添加评论后意识到了这一点。
不，但没关系，因为你的回答会帮助其他有这种麻烦的人

【解决方案2】：

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

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

【讨论】：

尝试在 ctx.rotate 之前添加一个 ctx.translate(playerX, playerY)。我希望我们知道您想要实现的目标。
谢谢，我错过了一件事：旋转角度总是 0.17，我没有增加它

【解决方案3】：

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

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

【讨论】：