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>

 

转载于:https://www.cnblogs.com/yunxiang-2013/p/5669360.html