HTML5 矩阵变换

transforms

使用图形上下文对象的transforms方法修改变换矩阵，该方法的定义如下：

context.transform(m11,m12,m21,m22,dx,dy);

其中m11,m12,m21,m22这4个参数来决定该如何变形，dx与dy参数移动坐标原点，dx表示在坐标轴向右移多少个单位，dy表示在y坐标轴向下移动多少个单位。

translate(x,y)

使用context.transform(1,0,0,1,x,y)或context.transform(0,1,1,0,x,y)方法进行替代，前面四个参数1、0、0、1或0、1、1、0表示不对图形进行缩放操作、变形操作，dxdy意义同上。

scale(x,y)

可以使用context.transform(1,0,0,1,x,y)或(0,1,1,0,x,y)方法进行代替，前面四个参数将图形横向扩大x倍，纵向扩大y倍，dx,dy为零，表示不移动坐标原点。

retate(angle)

替换方法如下

context.transform(Math.cos
        	(angle*Math.PI/180),
        	Math.sin(angle*Math.PI/180),
        	-Math.sin(angle*Math.PI/180),
        	Math.cos(angle*Math.PI/180),0,0);
        或
        context.transform(-Math.sin(angle*Math.PI/180),
        	Math.cos(angle*Math.PI/180),
        	Math.cos(angle*Math.PI/180),
        	Math.sin(angle*Math.PI/180),0,0);

下面是用transform绘制彩虹的示例

function draw(id) {
        	var canvas = document.getElementById(id);
        	if(canvas == null)
        		return false;
        	var context = canvas.getContext('2d');
        	/*定义颜色*/
        	var colors = ["red","orange","yellow","green","blue","navy","purple"];
        	/*定义线宽*/
        	context.lineWidth = 10;
        	context.transform(1,0,0,1,100,0)
        	/*循环绘制圆弧*/
        	for (var i = 0; i < colors.length; i++) {
        		/*定义每次向下移动10个像素的变换矩阵*/
        		context.transform(1,00,0,1,0,10);
        		/*设定颜色*/
        		context.strokeStyle = colors[i];
        		/*绘制圆弧 */
        		context.beginPath();
        		context.arc(50,100,100,0,Math.PI,true);
        		context.stroke();
        	}
        }