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