[code]
/**
* ...states and transforms
* @author amyflash.com
*/
(function() {
var can = document.getElementById("canvas");
var ctx = can.getContext("2d");
ctx.font="20px Arial";
ctx.fillText("旋转",20,20);
ctx.strokeStyle="#000000";
ctx.fillStyle="#FF0000";
ctx.lineWidth = "5";
ctx.translate(400,100); //x:400,y:100
ctx.rotate(Math.PI/4);
ctx.save(); //控制显示层级
ctx.fillRect(50,50,200,200);
ctx.strokeRect(50,50,200,200);
ctx.scale(0.5,0.5);
ctx.fillStyle="ffff00";
ctx.rotate(Math.PI/6);
ctx.fillRect(50,50,200,200);
ctx.strokeRect(50,50,200,200);
//保证最先画的显示在最上层
ctx.restore();
ctx.fillRect(50,50,200,200);
ctx.strokeRect(50,50,200,200);
})();
[/code]