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

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

如果您希望矩形围绕其中心点旋转，您必须：

• 使用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);
}