在同一个 canvas 中逆时针旋转 canvas 图像

Question

Say we have a canvas:

<canvas id="one" width="100" height="200"></canvas>

var canvas = document.getElementById("one");
var context = canvas.getContext("2d");
var cw = canvas.width;
var ch = canvas.height;

// Sample graphic
context.beginPath();
context.rect(10, 10, 20, 50);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

// create button
var button = document.getElementById("rotate");
button.onclick = function () {
  // rotate the canvas 90 degrees each time the button is pressed
  rotate();
}

var myImageData, rotating = false;

var rotate = function () {
  if (!rotating) {
    rotating = true;
    // store current data to an image
    myImageData = new Image();
    myImageData.src = canvas.toDataURL();

    myImageData.onload = function () {
      // reset the canvas with new dimensions
      canvas.width = ch;
      canvas.height = cw;
      cw = canvas.width;
      ch = canvas.height;

      context.save();
      // translate and rotate
      context.translate(cw, ch / cw);
      context.rotate(Math.PI / 2);
      // draw the previows image, now rotated
      context.drawImage(myImageData, 0, 0);
      context.restore();

      // clear the temporary image
      myImageData = null;

      rotating = false;
    }
  }
}

And on a button click the canvas gets rotated -90 degrees anticlockwise (around the centre) and the dimensions of the canvas get also updated, so in a sense, it looks like this afterwards: I want to rotate a canvas element to the anticlockwise rotation. I have used this code but it's not working as I want.

Answer 1

JavaScript has a built-in rotate() function for canvas context:

context.rotate( angle * Math.PI / 180);

The problem is that the rotation will only affect drawings made AFTER the rotation is done, which means you will need to:

• Clear the canvas first: context.clearRect(0, 0, canvas.width, canvas.height);
• Rotate the context context.rotate( 270 * Math.PI / 180);
• Redraw the graphics

Thus, I recommend wrapping the graphics we want to draw in a function to make it easier to call after every rotation:

function drawGraphics() {
    context.beginPath();
    context.rect(10, 10, 20, 50);
    context.fillStyle = 'yellow';
    context.fill();
    context.lineWidth = 7;
    context.strokeStyle = 'black';
    context.stroke();
}