如何在画布内旋转形状？

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

我正在使用其他画布在运行时使用：

绘制形状

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

两个画布的位置都是绝对的，所以它们看起来像是相互重叠。但我想同时旋转两个画布（角度值90,180,270,0）。

提前致谢

Answer 1

使用它：

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