使用键盘旋转 canvas 对象

Question

这是我的第一个问题。我正在做一个小行星游戏副本，我已经开始了宇宙飞船的运动，但是我在 js 的 canvas 中旋转它时遇到问题。问题是按下 key 后如何停止旋转？它在两个方向上旋转，但是当我释放键时，对象 returns 回到其初始状态。

代码如下：

window.addEventListener('keydown',doKeyDown,true);
    window.addEventListener('keyup',doKeyUp,true);
    //var x = canvas.width/2;
    //var y = canvas.height/2;
    var keys = new Array();
    function doKeyDown(evt){
        keys[evt.keyCode] = true;
    }
    function doKeyUp(evt){
        keys[evt.keyCode] = false;
    }

    var context = document.getElementById('pageCanvas').getContext('2d');
    var angle = 0;
    var angle2 = 0;
    function convertToRadians(degree) {
        return degree*(Math.PI/180);
    }

    function incrementAngle() {
        angle -= 10;
        if(angle > 360) {
            angle = 0;
        }
    }

    function decrementAngle(){
        angle2 += 10;
        if(angle2>360){
            angle2 = 0;
        }
    }



    function drawRandomlyColoredRectangle() {  

        context.save();
        context.clearRect(0,0,500,500);

        fillStyle = "#000000";
        context.fillRect(0,0,500,500);
        incrementAngle();
        decrementAngle();


        context.translate(200,200);
        if(37 in keys && keys[37]){
            context.rotate(convertToRadians(angle));
            console.log("lewo");
        };
        if (39 in keys && keys[39]){ //right
            //x += dx/5;
            //rotacja w prawo
            context.rotate(convertToRadians(angle2));
            console.log("prawo");
        };




        context.fillStyle = "green";
        context.fillRect(-25,-25,50,50);

        context.restore();
    }



   setInterval(drawRandomlyColoredRectangle, 20);

和fiddlehttp://jsfiddle.net/tomasthall/covyjaLb/2/

求助:c

Answer 1

只需将角度的当前值存储在变量中，并在每个渲染帧中使用它。

if(37 in keys && keys[37]){
    decrementAngle();
};

if (39 in keys && keys[39]){
    incrementAngle();
};

(...)

context.rotate(convertToRadians(angle));

检查并研究其他修复程序并阅读一些内容 tutorials/articles，然后再问下一个问题... http://jsfiddle.net/covyjaLb/3/

使用键盘旋转 canvas 对象

Rotating a canvas object with keyboard

javascript

canvas

rotation