详解通过HTML5 Canvas实现图片的平移及旋转变化的方法

body { background: url("./images/bg3.jpg") repeat; } #canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }

</style> </head>

<canvas id="canvas"> 你的浏览器居然不支持Canvas？！赶快换一个吧！！

</canvas> </div>

window.onload = function(){ var canvas = document.getElementById("canvas");

canvas.width = 800; canvas.height = 600;

var context = canvas.getContext("2d"); context.fillStyle = "#FFF";

context.fillRect(0,0,800,600);

context.fillStyle = "#00AAAA"; context.fillRect(100,100,200,100);

context.save();

context.fillStyle = "red"; context.translate(100,100);

context.fillRect(100,100,200,100); context.restore();

context.save();

context.fillStyle = "green"; context.translate(200,200);

context.fillRect(100,100,200,100); context.restore();