首页 | 编程 | Java

JavaScript多种图形实现代码实例

2020年06月28日 作者：aTeacher原文

1．小星星

设有如下的曲线参数方程：

N=5

x = r*sin(nθ)*cos(θ)

y = r*sin(nθ)*sin(θ) （0≤θ≤2π）

用循环依次取θ值为0~2π（每次增量为π/64），计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个一个5瓣花卉图案。

编写如下的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,400,300);
   context.strokeStyle="blue";
   context.lineWidth=2;
   context.beginPath();
   var r=120;          // 下面可进行修改的语句 （3）
   var n=5;           // 下面可进行修改的语句 （3）
   for (theta=0;theta<=2*Math.PI;theta+=Math.PI/64)
   {
     b=r*Math.sin(n*theta);  // 下面可进行修改的语句 （3）
     x=200+b*Math.cos(theta);
     y=150+b*Math.sin(theta);
     if (theta==0)
      context.moveTo(x,y);
     else
      context.lineTo(x,y);
   }
   context.stroke();
  }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图1所示的5瓣花卉图案。

图2 5瓣花卉图案2

这个图案比图1中的图案的感觉是中间向外扩展了，使得中心部位出现空白。再次修改语句3为“b=r*(2+Math.sin(n*theta)/2);”，以增大中间部分的空白，则在画布中绘制出如图3所示的图案，像小星星吗？

图4 六角雪花图案

我们这样想一想，若将n的值修改为一个实数（有小数部分）会这样呢？例如，将

“var n=5;”修改为“n=5.05;”，则在画布中绘制出如图5所示的图案。

图6 五角环带

将上面程序中的n值由“n=5.05”修改为“n=9.05”，则在画布中绘制出如图7所示的环带。

图8 n值为9.2时的圆环

若将上面程序中的n值修改为5.5，且将k值修改为12，则在画布中绘制出如图9所示的圆环。

图10 n值为5.5时的另一环状图案

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持来客网。

相关链接