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

平移变换translate()平移变换，故名思议，就是一般的图形位移。比如这里我想将位于(100，100)的矩形平移至(200，200)点。那么我只要在绘制矩形之前加上context.translate(100,100)即可。

这里的translate()只传入两个参数，其实就是新画布坐标系原点的坐标。下面结合代码来看看效果。

XML/HTML Code复制内容到剪贴板

html>

平移变换

body { background: url("./images/bg3.jpg") repeat; }

#canvas { border: 1px solid #aaaaaa; display: block; margin: 50px auto; }

你的浏览器居然不支持Canvas？！赶快换一个吧！！

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.fillStyle = "red";

context.translate(100,100);

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

};