（18）HTML5-控制图形的变形

来源：互联网发布：大学英语听力软件编辑：程序博客网时间：2024/06/12 01:24

介绍完绘制简单几何图形的函数后，接着来介绍如何使用javascript控制图形的变形，例如位移（translate），旋转（rotate）和缩放（scale）等，在游戏中通常会使用到这些变形方法。

{translate}

位移方法可以直接对画布的x，y坐标进行移动。所谓对画布进行移动，也就是原本画布定义的原点坐标（0，0）在画布的左上角，当使用位移方法后，原点坐标将会重新定义成坐标（x，y）的位置，后续绘制的图形将会把坐标（x，y）认作为原点坐标（0，0）.

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <style>        canvas{            border:1px solid black;        }     </style>     <script>     function draw(){         var canvas=document.getElementById('tutorial');     var ctx = canvas.getContext('2d');     ctx.fillRect(0,0,50,50);     ctx.translate(100,100);     ctx.fillRect(0,0,50,50);     }        </script> </head> <body onload="draw()">    <canvas id="tutorial" width="300" height="300">浏览器不支持画布功能</canvas> </body></html>

与translate（）函数一样，rotate（）函数以画布原点w为中心来顺时针旋转画布，旋转角度的计算方法与arc（）函数的弧度计算方法相同（弧度=Math.PI*角度/180）.若想要改变旋转的原点，可以配合translate（）函数先重新定义画布的原点再进行旋转。通过rotate指令设置画布原点的旋转角度为20°，之后所绘制的图形都将会顺时针旋转20°后再绘制。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <style>        canvas{            border:1px solid black;        }     </style>     <script>     function draw(){         var canvas=document.getElementById('tutorial');     var ctx = canvas.getContext('2d');     ctx.rotate(20*Math.PI/180);     ctx.fillRect(50,20,100,50);     }        </script> </head> <body onload="draw()">    <canvas id="tutorial" width="300" height="300">浏览器不支持画布功能</canvas> </body></html>

缩放指令可以改变画布中网格的比例，原本的基本单位为1pixel，经过缩放指令的变形后，可分别对x轴和y轴的网格距离进行缩放。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <style>        canvas{            border:1px solid black;        }     </style>     <script>     function draw(){         var canvas=document.getElementById('tutorial');     var ctx = canvas.getContext('2d');    ctx.strokeRect(5,5,20,30);    ctx.scale(2,2);    ctx.strokeRect(5,5,20,30);//相对第一个矩形变大两倍     }        </script> </head> <body onload="draw()">    <canvas id="tutorial" width="300" height="300">浏览器不支持画布功能</canvas> </body></html>

在复杂的变形控制中，可能会多次改变画布的位移，旋转，缩放等数值，而这些改变步骤可以通过save（）方法保存现阶段画布所有变形效果，每一次调用save（）函数，画布的状态就会存进一个“先进后出”的堆栈之中，然而当需要回到上一个画布设置时，则可使用restore（）方法来恢复最近一次存储的画布状态，也就是从堆栈中取出最后一个存入的状态，类似于键盘的ctrl+z效果。

<!DOCTYPE html> <head>     <meta charset="utf-8"/>     <style>        canvas{            border:1px solid black;        }     </style>     <script>     function draw(){         var canvas=document.getElementById('tutorial');     var ctx = canvas.getContext('2d');        ctx.save();        ctx.translate(50,50);        ctx.save();        ctx.rotate(Math.PI*20/180);        ctx.fillStyle='blue';        ctx.fillRect(10,10,50,50);        ctx.restore();        ctx.fillStyle='red';        ctx.fillRect(10,10,50,50);        ctx.restore();        ctx.fillStyle='yellow';        ctx.fillRect(10,10,50,50);     }        </script> </head> <body onload="draw()">    <canvas id="tutorial" width="450" height="400">浏览器不支持画布功能</canvas> </body></html>

0 0