旋转变换：图形上的各点绕一固定点沿圆周路径作转动称为旋转变换。可用旋转角表示旋转量的大小。

        旋转变换通常约定以逆时针方向为正方向。最简单的旋转变换是以坐标原点(0,0)为旋转中心，这时，平面上一点P(x,y) 旋转了θ之后，变成点P’(x,y) ，如图1所示。

图1 点P逆时针旋转

        由三角关系可得：

         平面上一点P(x,y)若按顺时针方向旋转了θ之后，变成点P’(x,y) ，如图2所示。

图2 点P顺时针旋转

        由三角关系可得：

        先绘制一个三角形，然后将该三角形依次顺时针旋转45°，90°，135°，180°，225°，270°，315°，可以绘制出一个三角形旋转图案。

        编写如下的HTML代码。

三角形旋转

  function draw(id)

  {

     var canvas=document.getElementById(id);

     if (canvas==null)

        return false;

     var context=canvas.getContext('2d');

     context.fillStyle="#EEEEDD";

     context.fillRect(0,0,300,300);

     context.strokeStyle="red";

     context.lineWidth=1;

     context.fillStyle="yellow";

     context.beginPath();

     px1=150;  py1=150;

     px2=250;  py2=150;

     px3=200;  py3=120;

     context.moveTo(px1,py1);

     context.lineTo(px2,py2);

     context.lineTo(px3,py3);

     context.lineTo(px1,py1);

     x0=150;  y0=150;        // 旋转中心

a=Math.PI/4;            // 旋转角度

     for (i=1;i