Question

这是我的第一个问题。我正在做一个小行星游戏副本，我已经从太空飞船运动开始，但是我在js中用画布旋转它有问题。问题是按键后如何停止旋转？它在两个方向上旋转，但是当我释放键时，对象返回其初始状态。

这是代码：

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

并摆弄http://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));

在询问下一个问题之前，检查并研究其他修正并阅读一些教程/文章...... http://jsfiddle.net/covyjaLb/3/

使用键盘旋转画布对象

1 个答案: