0

スタックオーバーフローですでに多くの同様の質問があることは知っていますが、それでも、その方法がわかりません。ボールのテクスチャだけ回転させたい。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 に答える