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

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