如何使用键盘旋转画布框？

Question

I've been wondering if there is a way to turn a canvas box using the keyboard without using animations.

I would like to press the key E to turn my box clockwise, and key Q should turn it counter-clockwise. As I said before, using no animations .

If you would like to see exactly what I'm working on, and the context where it should be done, here is a link http://cssdeck.com/labs/collab/stexplorer

and just in case, I'll post my code here too!

If you use this code, notice that I want it to be able to turn and move forward at the same time .

 $(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); ctx.beginPath(); ctx.rect(ss.x, ss.y, ss.width, ss.height); ctx.lineWidth = 1; ctx.strokeStyle = "white"; ctx.stroke(); } function move() { x = ss.x + (xD * n); y = ss.y + (yD * n); ss.x = x; ss.y = y; render(); } $(document).keydown(function(e) { if(btn !== undefined){ return; } // shoot (space):32 // left xD = e.which == 37 ? -1 : xD; xD = e.which == 65 ? -1 : xD; // up yD = e.which == 38 ? -1 : yD; yD = e.which == 87 ? -1 : yD; // right xD = e.which == 39 ? 1 : xD; xD = e.which == 68 ? 1 : xD; // down yD = e.which == 40 ? 1 : yD; 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 xD = e.which == 37 ? 0 : xD; xD = e.which == 65 ? 0 : xD; // up yD = e.which == 38 ? 0 : yD; yD = e.which == 87 ? 0 : yD; // right xD = e.which == 39 ? 0 : xD; xD = e.which == 68 ? 0 : xD; // down 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

If you want the rect to rotate around it's centerpoint, you must:

• Set the rotation point to the center of the rect using context.translate
• Rotate the canvas using context.rotate
• Draw the rect

Here's (untested) example code:

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