一.变换的三种方式
1.平移:translate(25,25);
2.扩大缩小:scale(0.9,0.9);//注意:在一个循环的操作中，倍数是可以累加的，还有border也是可以放大缩小的。
3.旋转:rotate(Math.PI/10);
二.实例操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>绘制变形图形</title>
<script>
window.onload = function(){
var oC = document.getElementById('can');
var oCt = oC.getContext('2d');
oCt.fillStyle = '#c0c0c0';
oCt.fillRect(0,0,500,500);
oCt.fillStyle = 'rgba(255,0,0,0.25)';
//图形的绘制
//translate(x,y)原点(0,0);x轴向右平移200，y轴向下平移50.
oCt.fillStyle = 'rgba(255,0,0,0.25)';
oCt.translate(200,100);
for(var i = 0;i < 50;i++){
//画填充的直方形
oCt.fillRect(0,0,100,50);
//x向右平移25，y向下平移25
oCt.translate(25,25);
//scale(x,y)整体画布所画图案x，y比例分别缩小0.9倍
oCt.scale(0.9,0.9);
//rotate(n*Math.PI/180)画布所画的图案旋转度数为18度。
oCt.rotate(Math.PI/10);
}
};
</script>
</head>
<body>
<canvas id='can' width="500px" height="500px"></canvas>
</body>
</html>
