码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript图形实例:波形组合图案

时间:2020-06-28 10:04:05      阅读:90      评论:0      收藏:0      [点我收藏+]

标签:sla   tran   get   for   ntb   ima   math   mamicode   http   

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="#EEEEFF";

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

     context.strokeStyle="red";

     context.lineWidth=1;

     context.save();

     context.translate(180,180);

     context.beginPath();

     for (fy=-45; fy<=45;fy+=6)     // 绘制16条正弦曲线构成波形

         for (x=-180;x<=180;x+=6)      

         {

              y=135/180*x+fy+30*Math.sin(4*x*Math.PI/360);

              if (x==-180)  context.moveTo(x,y);

              else  context.lineTo(x,y);  

         }

     context.stroke();

     context.restore();

  }

</script>

</head>

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

<canvas id="myCanvas" width="360" height="360"  style="border:3px double #996633;">

</canvas>

</body>

</html>

      将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制出的波形图案1,如图1所示。

技术图片

图1  按坐标(x,y)绘制的波形图案1

      图1中的波形按坐标点(x,y)连线进行绘制,若按坐标(-x,y)绘制可得如图2所示的波形图案2;若按坐标(y,x)绘制可得如图3所示的波形图案3;若按坐标(y,-x)绘制可得如图4所示的波形图案4。

 技术图片

图2  按坐标(-x,y)绘制的波形图案2

技术图片

图3  按坐标(y,x)绘制的波形图案3

技术图片

图4  按坐标(y,-x)绘制的波形图案4

2.波形组合图案

我们将图1~图4的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,360,360);

     context.strokeStyle="red";

     context.lineWidth=1;

     context.save();

     context.translate(180,180);

     context.beginPath();

     for (m=-1;m<=1;m+=2)

       for (n=1;n<=2;n++)

         for (fy=-45; fy<=45;fy+=6)

           for (a=-180;a<=180;a+=6)

           {

              x=m*a;

              y=135/180*a+fy+30*Math.sin(4*a*Math.PI/360);

              if (n==2)  { t=x;  x=y;  y=t; }

              if (a==-180)  context.moveTo(x,y);

              else  context.lineTo(x,y);  

           }

     context.stroke();

     context.restore();

  }

</script>

</head>

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

<canvas id="myCanvas" width="360" height="360"  style="border:3px double #996633;">

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制出的波形组合图案,如图5所示。

技术图片

图5  波形组合图案

3.还是波形组合图案

仿照上面的思路,可编写如下的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,360,360);

     context.strokeStyle="red";

     context.lineWidth=1;

     context.save();

     context.translate(180,180);

     context.beginPath();

     for (m=-1;m<=1;m+=2)

       for (n=1;n<=2;n++)

         for (fy=0; fy<=360;fy+=10)

           for (a=-180;a<=180;a+=6)

           {

              x=m*a;

              y=180/360*(a-180)+fy/2+30*Math.sin(4*a*Math.PI/360);

              if (n==2)  { t=x;  x=y;  y=t; }

              if (a==-180)  context.moveTo(x,y);

              else  context.lineTo(x,y);  

           }

     context.stroke();

     context.restore();

  }

</script>

</head>

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

<canvas id="myCanvas" width="360" height="360"  style="border:3px double #996633;"></canvas>

</body>

</html>

      将上述HTML代码保存到一个html文本文件中,再在浏览器中打开包含这段HTML代码的html文件,可以看到在画布中绘制出的另一种波形组合图案,如图6所示。

技术图片

图6  另一种波形组合图案

      我们若将绘制图6的HTML文件中的两条语句

      “for (n=1;n<=2;n++)”和“if (n==2)  { t=x;  x=y;  y=t; }”删除掉,

      即只将按坐标(x,y)绘制的波形与按坐标(-x,y)绘制的波形组合,则在画布中绘制出如图7所示的波形组合图案。

技术图片

图7 两波形组合图案

       若只将绘制图6的HTML文件中的语句“for (m=-1;m<=1;m+=2)”改写为“m=1;”,即只将按坐标(x,y)绘制的波形与按坐标(y,x)绘制的波形组合,则在画布中绘制出如图8所示的波形组合图案。

技术图片

图8  另一种两波形组合图案

JavaScript图形实例:波形组合图案

标签:sla   tran   get   for   ntb   ima   math   mamicode   http   

原文地址:https://www.cnblogs.com/cs-whut/p/13201067.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!