javascript - 如何在 Canvas 内旋转形状？

Question

我正在使用 canvas 加载图像:

var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');

context.scale(0.5,0.5);
canvas.setAttribute('width', tempImg.width*0.5);
canvas.setAttribute('height', tempImg.height*0.5);
context.drawImage(tempImg ,0,0,canvas.width,canvas.height);

我正在使用其他 Canvas 在运行时绘制形状:

var annCanvas=document.getElementById('annCanvas');
var annContext=annCanvas.getContext('2d');
context.beginPath();
context.lineWidth=4;
context.strokeRect(x,y,w,h);
context.stroke();

两个 Canvas 的位置都是绝对的，所以它们看起来像彼此重叠。但我想同时旋转两个 Canvas ( Angular 值 90,180,270,0)。

提前致谢

Answer 1

使用这个:

context.rotate(90); // rotates 90 deg clockwise