HTML5学习笔记-绘制变形图形
canvas可以使用moveTo来移动画笔，同时也可以使用变换来调整画笔下的画布，变换的方法包括旋转、平移和缩放，绘制图形很方便。
绘制平移效果的图形
实现图形的平移用translate(x,y)方法，如，原来在（100,100），translate(1,1)，则新坐标原点在(101,101).
1 <h3>变换原点坐标</h3> 2 <canvas id="canvas1" width="400" height="300" style="border:1px solid blue;"> 3 Your browser does not support the canvas element. 4 </canvas> 5 6 <script type="text/javascript"> 7 var c=document.getElementById('canvas1'); 8 var context=c.getContext("2d"); 9 context.fillStyle="#eeeeff"; 10 context.fillRect(0,0,400,300); 11 context.translate(200,50); 12 context.fillStyle="rgba(255,0,0,0.25)"; 13 for(var i=0;i<20;i++){//这里循环控制平移，达到我想要的阶梯形效果 14 context.translate(25,25); 15 context.fillRect(0,0,100,50);//绘制矩阵 16 }
绘制缩放效果的图形
缩放使用scale(x,y)方法，x,y值大于1表示放大，0~1表示缩小。
1 <h3>绘制图形缩放</h3> 2 <canvas id="canvas2" width="400" height="300" style="border:1px solid blue;"> 3 Your browser does not support the canvas element. 4 </canvas> 5 6 <script type="text/javascript"> 7 var c=document.getElementById('canvas2'); 8 var context=c.getContext("2d"); 9 context.fillStyle="#eeeeff"; 10 context.fillRect(0,0,400,300); 11 context.translate(200,50); 12 context.fillStyle="rgba(255,0,0,0.25)"; 13 for(var i=0;i<20;i++){ 14 context.scale(3,0.5); //循环完成 15 context.fillRect(0,0,100,50); 16 } 17 </script>
绘制旋转效果的图形
旋转图像使用rotate(x,y)方法，默认从左上角（0,0）开始旋转，通过指定角度改变画布坐标和浏览器中canvas元素的像素间映射。
1 <h3>绘制旋转图形</h3> 2 <canvas id="canvas3" width="400" height="300" style="border:1px solid blue;"> 3 Your browser does not support the canvas element. 4 </canvas> 5 6 <script type="text/javascript"> 7 var c=document.getElementById('canvas3'); 8 var context=c.getContext("2d"); 9 context.fillStyle="#eeeeff"; 10 context.fillRect(0,0,400,300); 11 context.translate(200,50); 12 context.fillStyle="rgba(255,0,0,0.25)"; 13 for(var i=0;i<20;i++){ 14 context.rotate(3,0.5); //循环完成旋转，横向放大3倍，纵向缩小一倍 15 context.fillRect(0,0,100,50); 16 } 17 </script>
