html5{使用translate,scale,rotate:实现坐标变换}

平移translate
context.translate(x,y)
x表示将坐标原点向左右移动多少个单位
y表示将坐标原点向上下移动多少个单位
扩大scale
context.scale(x,y)
x是水平方向的放大倍数
y是垂直方向的放大倍数
旋转rotate
context.rotate(angle)
angle指旋转的角度

js代码如下

view source

print?

01	function draw(id)

02

{

03	var canvas=document.getElementById(id);

04	if(canvas==null)

05	return false;

06	var context=canvas.getContext('2d');

07	context.fillStyle="#eeeeff";

08	context.fillRect(0,0,400,300);

09	context.translate(200,50);

10	context.fillStyle='rgba(255,0,0,0.25)';

11	for(var i=0;i<50;i++){

12	context.translate(25,25);

13	context.scale(0.95,0.95);

14	context.rotate(Math.PI/10);

15	context.fillRect(0,0,100,50);

16

}

17

}