Как повернуть рамку с помощью клавиатуры?

Question

Мне было интересно, есть ли способ превратить коробку с помощью клавиатуры без использования анимации.

Я хотел бы нажать клавишу E, чтобы повернуть мою коробку по часовой стрелке, а ключ Q должен повернуть его против часовой стрелки. Как я уже говорил, используя нет анимаций.

Если вы хотели бы видеть именно то, что я работаю, и контекст, в котором оно должно быть сделано, вот ссылка http://cssdeck.com/labs/collab/stexplorer

и на всякий случай, я выложу свой код здесь!

Если вы используете этот код, обратите внимание, что я хочу, чтобы быть в состоянии повернуть и двигаться вперед в одновременно.

$(function() { 
 
    var n = 3; 
 
    var xD = 0; 
 
    var yD = 0; 
 
    var btn = undefined; 
 
    var canvas = document.getElementById("canvas"); 
 
    var ctx = canvas.getContext("2d"); 
 

 
    window.addEventListener('resize', resizeCanvas, false); 
 

 
    function resizeCanvas() { 
 
    canvas.width = window.innerWidth; 
 
    canvas.height = window.innerHeight; 
 
    render(); 
 
    } 
 

 
    var ss = { 
 
    "x": 0, 
 
    "y": 0, 
 
    "width": 100, 
 
    "height": 75 
 
    }; 
 

 
    function render() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t ctx.beginPath(); 
 
\t ctx.rect(ss.x, ss.y, ss.width, ss.height); 
 
\t ctx.lineWidth = 1; 
 
\t ctx.strokeStyle = "white"; 
 
\t ctx.stroke(); 
 
    } 
 

 
    function move() { 
 
\t x = ss.x + (xD * n); 
 
\t y = ss.y + (yD * n); 
 
    ss.x = x; 
 
    ss.y = y; 
 
    render(); 
 
    } 
 

 
    $(document).keydown(function(e) { 
 
    if(btn !== undefined){ 
 
     return; 
 
    } 
 

 
    // shoot (space):32 
 
    // left 
 
\t xD = e.which == 37 ? -1 : xD; 
 
    xD = e.which == 65 ? -1 : xD; 
 
    // up 
 
\t yD = e.which == 38 ? -1 : yD; 
 
    yD = e.which == 87 ? -1 : yD; 
 
    // right 
 
\t xD = e.which == 39 ? 1 : xD; 
 
    xD = e.which == 68 ? 1 : xD; 
 
    // down 
 
\t yD = e.which == 40 ? 1 : yD; 
 
\t yD = e.which == 83 ? 1 : yD; 
 
    // clockwise e:69 
 
    // counter-clockwise q: 81 
 
    // zoom-out f:70 
 
    // zoom-in r:82 
 

 
    btn = e.which; 
 
    e.preventDefault(); 
 
    }); 
 

 
    $(document).keyup(function(e) { 
 
    if(e.which === btn){ 
 
     btn = undefined; 
 
    } 
 

 
    // shoot (space):32 
 
    // left 
 
\t xD = e.which == 37 ? 0 : xD; 
 
    xD = e.which == 65 ? 0 : xD; 
 
    // up 
 
\t yD = e.which == 38 ? 0 : yD; 
 
    yD = e.which == 87 ? 0 : yD; 
 
    // right 
 
\t xD = e.which == 39 ? 0 : xD; 
 
    xD = e.which == 68 ? 0 : xD; 
 
    // down 
 
\t yD = e.which == 40 ? 0 : yD; 
 
    yD = e.which == 83 ? 0 : yD; 
 
    // clockwise e:69 
 
    // counter-clockwise q: 81 
 
    // zoom-out f:70 
 
    // zoom-in r:82 
 

 
    e.preventDefault(); 
 
    }); 
 

 
    resizeCanvas(); 
 
    render(); 
 
    setInterval(move, .01); 
 
});

body { 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
#canvas { 
 
    border: 1px solid #000000; 
 
    background-color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<canvas id="canvas" width="300" height="200"></canvas>

Answer 1

Если вы хотите, чтобы прямоугольник вращаться вокруг своей CenterPoint, вы должны:

• Установите точку поворота к центру прямоугольника, используя context.translate
• Поворот на холст с использованием context.rotate
• Нарисуйте прямую

Вот (непроверенные) Пример кода:

var accumRotation=0; 

// now change the accumRotation using the E & Q keys 
// on key-E do rotate(Math.PI/2); and render(); 
// on key-Q do rotate(-Math.PI/2); and render(); 

function rotate(additionalRotation){ 
    accumRotation+=additionalRotation; 
} 

function render() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    // translate to the centerpoint of the rect 
    // This sets the [0,0] origin of the canvas to the rect centerpoint 
    // This will set the rotation point at the center of the rect 
    var cx=ss.x+ss.width/2; 
    var cy=ss.y+ss.height/2; 
    ctx.translate(cx,cy); 
    // rotate 
    ctx.rotate(accumRotation); 
    // draw the rect 
    ctx.beginPath(); 
    // since [0,0] is at center rect, you must pull the rect drawing 
    // leftward & upward by half the rect width & height 
    ctx.rect(-ss.width/2, -ss.height/2, ss.width, ss.height); 
    ctx.lineWidth = 1; 
    ctx.strokeStyle = "white"; 
    ctx.stroke(); 
    // always clean up by unrotating & untranslating 
    ctx.rotate(-accumRotation); 
    ctx.translate(-cx,-cy); 
}