JavaScript圖形實例：圖形的旋轉變換

時間  2019-12-23
標籤 javascript 圖形 實例 旋轉 變換 欄目 JavaScript 简体版
原文   原文鏈接

        旋轉變換：圖形上的各點繞一固定點沿圓周路徑做轉動稱爲旋轉變換。可用旋轉角表示旋轉量的大小。javascript

        旋轉變換一般約定以逆時針方向爲正方向。最簡單的旋轉變換是以座標原點(0,0)爲旋轉中心，這時，平面上一點P(x,y) 旋轉了θ以後，變成點P’(x,y) ，如圖1所示。html

 

圖1 點P逆時針旋轉java

        由三角關係可得：canvas

          

         平面上一點P(x,y)若按順時針方向旋轉了θ以後，變成點P’(x,y) ，如圖2所示。瀏覽器

 

圖2 點P順時針旋轉rest

        由三角關係可得：htm

  

1．三角形旋轉

        先繪製一個三角形，而後將該三角形依次順時針旋轉45°，90°，135°，180°，225°，270°，315°，能夠繪製出一個三角形旋轉圖案。blog

        編寫以下的HTML代碼。ip

<!DOCTYPE html>get

<head>

<title>三角形旋轉</title>

<script type="text/javascript">

  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<=7;i++)

     {

        tx=px1;  px1=x0+(px1-x0)*Math.cos(a)+(py1-y0)*Math.sin(a); 

        py1=y0-(tx-x0)*Math.sin(a)+(py1-y0)*Math.cos(a);

        tx=px2;  px2=x0+(px2-x0)*Math.cos(a)+(py2-y0)*Math.sin(a); 

        py2=y0-(tx-x0)*Math.sin(a)+(py2-y0)*Math.cos(a);

        tx=px3;  px3=x0+(px3-x0)*Math.cos(a)+(py3-y0)*Math.sin(a); 

        py3=y0-(tx-x0)*Math.sin(a)+(py3-y0)*Math.cos(a);

        context.moveTo(px1,py1);

        context.lineTo(px2,py2);

        context.lineTo(px3,py3);

        context.lineTo(px1,py1);

     }

     context.closePath();

     context.stroke();

     context.fill();

  }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

        將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出三角形旋轉圖案，如圖1所示。

 

圖1  三角形旋轉圖案

2．旋轉小正方形

        在Canvas畫布中繪製18行18列共324個小正方形（每一個小正方形的四個頂點取自半徑爲10的圓周上的4等分點），每一個正方形按計算的旋轉角度進行逆時針旋轉。

        編寫的HTML文件的內容以下。

<!DOCTYPE html>

<head>

<title>旋轉小正方形</title>

<script type="text/javascript">

  function draw(id)

  {

     var canvas=document.getElementById(id);

     if (canvas==null)

        return false;

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

     context.fillStyle="#EEEEFF";

     context.fillRect(0,0,500,400);

     context.fillStyle="yellow";

     context.strokeStyle="red";

     context.lineWidth=1;

     context.beginPath();

     for (px=-170;px<=170;px+=20)

       for (py=-170;py<=170;py+=20)

       {

          a=Math.abs(px)/170*Math.PI/2;

          for (i=0;i<=4;i++)

          {

             x1=10*Math.cos(i*Math.PI/2);

             y1=10*Math.sin(i*Math.PI/2);

             x2=x1*Math.cos(a)-y1*Math.sin(a);

             y2=x1*Math.sin(a)+y1*Math.cos(a);

             x=px+200+x2;

             y=py+200-y2;

             if (i==0)

                context.moveTo(x,y);

             else

                context.lineTo(x,y);

          }

       }

     context.closePath();

     context.fill();

     context.stroke();

  }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="500" height="400">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

        將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出旋轉小正方形圖案1，如圖2所示。

 

圖2  小正方形圖案1

        若將上述代碼中的旋轉角度計算式「a=Math.abs(px)/170*Math.PI/2;」改寫爲

「a=Math.sqrt(px*px+py*py)/Math.sqrt(170*170*2)*Math.PI/2+Math.PI/4;」。再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出旋轉小正方形圖案2，如圖3所示。

 

圖3  小正方形圖案2

3．六瓣花朵旋轉一週

        先生成六瓣花朵繪製的基礎數據。而後按逆時針旋轉60°的方式繪製6朵六瓣花，正好構成一個圓周。編寫的HTML代碼以下。

<!DOCTYPE html>

<head>

<title>六瓣花朵旋轉一週</title>

<script type="text/javascript">

  function draw(id)

  {

     var canvas=document.getElementById(id);

     if (canvas==null)

        return false;

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

     context.fillStyle="#EEEEFF";

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

     context.fillStyle="red";

     context.strokeStyle="blue";

     context.lineWidth=1;

     var dig=Math.PI/64;

     var x=new Array(129);

     var y=new Array(129);

     for (var i=0;i<=128;i++)      // 生成六瓣花朵圖案的基礎數據

     {

         d=50*(1+Math.sin(18*i*dig)/5);

         t=d*(0.5+Math.sin(6*i*dig)/2);

         x[i]=(60+t*Math.cos(i*dig));

         y[i]=(60+t*Math.sin(i*dig));

     }

     context.beginPath();

     for (n=0;n<=5;n++)

         for (i=0;i<=128;i++)

         {

            x1=x[i]*Math.cos(n*Math.PI/3)-y[i]*Math.sin(n*Math.PI/3)+160;

            y1=x[i]*Math.sin(n*Math.PI/3)+y[i]*Math.cos(n*Math.PI/3)+160;

            if (i==0)

            {

              context.moveTo(x1,y1);

              bx=x1;  by=y1;

            }

            else

              context.lineTo(x1,y1);

          }

      context.lineTo(bx,by);

      context.closePath();

      context.stroke();

      context.fill();

  }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="320" height="320">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

        在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出六瓣花朵旋轉一週圖案，如圖4所示。

 

圖4  六瓣花朵旋轉一週

 

        上面的3個實例均採用圖形旋轉的座標計算公式計算後進行旋轉圖形的繪製。實際上，HTML Canvas API中提供了圖形旋轉的方法。其調用方法是：

          context . rotate(angle)     // 圖形按給定的弧度angle進行順時針旋轉

         rotate方法旋轉的中心始終是canvas的原點。若是要改變它，須要使用translate方法。

         用rotate方法改寫實例1的程序，編寫HTML文件以下。

<!DOCTYPE html>

<head>

<title>三角形旋轉</title>

<script type="text/javascript">

  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.translate(150,150);   // 旋轉中心

     context.save();

     for (var j=0;j<8;j++)

     {

          context.rotate(Math.PI*2/8);

          context.beginPath();

          context.moveTo(0,0);

          context.lineTo(100,0);

          context.lineTo(50,-30);

          context.lineTo(0,0);

          context.closePath();

          context.stroke();

          context.fill();

      }

      context.restore();

  }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

4．風車圖案

        將一個梯形按順時針旋轉90°的方式繪製4次，能夠繪製出一個風車圖案。編寫HTML文件以下。

<!DOCTYPE html>

<head>

<title>風車的繪製</title>

<script type="text/javascript">

  function draw(id)

  {

     var canvas=document.getElementById(id);

     if (canvas==null)

        return false;

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

     context.fillStyle="#EEEEFF";

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

     context.translate(150,150);

     context.save();

     context.fillStyle = 'green';

     for (var j=0;j<4;j++)

     {

          context.rotate(Math.PI*2/(4));

          context.beginPath();

          context.moveTo(-20,-80);

          context.lineTo(0,-80);

          context.lineTo(0,0);

          context.lineTo(-30,0);

          context.closePath();

          context.fill();

      }

      context.restore();

   }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="300" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

        在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出風車圖案，如圖5所示。

  

圖5  風車圖案

5．七彩圓盤

        經過旋轉繪製圓的方式，能夠繪製出一個七彩圓盤圖案。編寫HTML文件以下。

<!DOCTYPE html>

<head>

<title>七彩圓盤</title>

<script type="text/javascript">

  var colors = ['red','orange', 'yellow', 'green', 'cyan','blue', 'purple' ];

  function draw(id)

  {

     var canvas=document.getElementById(id);

     if (canvas==null)

        return false;

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

     context.fillStyle="#EEEEFF";

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

     context.translate(200,150);

     for (var i=1;i<8;i++)

     {

         context.save();

         context.fillStyle = colors[i-1];

         for (var j=0;j<i*7;j++)

         {

              context.rotate(Math.PI*2/(i*7));

              context.beginPath();

              context.arc(0,i*20,8,0,Math.PI*2,true);

              context.fill();

          }

          context.restore();

      }

   }

</script>

</head>

<body onload="draw('myCanvas');">

<canvas id="myCanvas" width="400" height="300">您的瀏覽器不支持canvas！

</canvas>

</body>

</html>

        在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出風車圖案，如圖6所示。

 

圖6 七彩圓盤

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程