HTML5画布旋转单个元素

我知道已经有问计算器上许多similiar的问题，不过，我无法弄清楚如何做到这一点。我只想旋转球纹理。平局被调用计时器：HTML5画布旋转单个元素

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();

来源

2012-10-05 karaxuna

您是否希望球以_additional_ 0.17弧度旋转，以绘制_each_框架？。 – Alnitak

假设你想给球的错觉继续旋转，您应该增加绘制的每个框架的旋转角度。

正如你所写的，你的代码将在每帧上给球固定旋转0.17弧度。

var frame = 0; 

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

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

来源

2012-10-05 17:48:44 Alnitak

你是写，我已经提到它 – karaxuna

@karaxuna我假定你意识到这一点后，我将我的意见你的问题。 – Alnitak

没有，但它并不重要了，因为你的答案帮助有这种麻烦的人 – karaxuna

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

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

来源

2012-10-05 17:38:30 enhzflep

不工作:(我会发布完整的源 – karaxuna

尝试ctx.rotate之前加入ctx.translate（PlayerX的，playerY）我希望我们知道你想达到什么 –

感谢，我错过了一两件事：旋转角度百达0.17，我不是增加它 – karaxuna

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

所以存储每一帧的时间，因此可以使帧之间的比较，并设置你的旋转速度为每秒弧度。

来源

2012-10-06 03:48:41

HTML5画布旋转单个元素

回答

相关问题