JavaScript图形实例：正多边形

哈妮發表於 2019-12-23 20:37:00

圆心位于坐标原点，半径为R的圆的参数方程为
              X=R*COS(θ)
             Y=R*SIN(θ)
        在圆上取N个等分点，将这N个点首尾连接N条边，可以得到一个正N边形。
<h3>1．正多边形阵列</h3>
       构造一个8行8列的正N（N为3~10）边形阵列。编写如下的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,400);
     context.fillStyle="yellow";
     context.strokeStyle="red";
     context.lineWidth=1;
     context.beginPath();
     for (px=30;px<390;px+=45)
       for (py=30;py<390;py+=45)
       {
          n=((px-30)/45+(py-30)/45)%8+3;
          for (i=0;i<=n;i++)
          {
             x1=20*Math.cos(i*Math.PI*2/n);
             y1=20*Math.sin(i*Math.PI*2/n);
             x=px+x1;
             y=py+y1;
             if (i==0)
                context.moveTo(x,y);
             else
                context.lineTo(x,y);
          }
       }
     context.closePath();
     context.stroke();
     context.fill();
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出正3~10边形阵列，如图1所示。
<img src="https://img2018.cnblogs.com/common/1485495/201912/1485495-20191223203352382-424476450.png"> 
图1  正3~10边形阵列
<h3>2．边长相等的正多边形</h3>
        图1中的正N边形通过在圆周上取N等分点得到的，它们的外接圆的半径均相等，但各自的边长并不相等。若要绘制出边长相等的正N边形，可以编写如下的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;
     var x0=150;
     var y0=30;
     context.beginPath();
     for (n=3;n<=10;n++)
     {
       dig=6.28318/n;
      context.moveTo(x0,y0);
       x=x0;
       y=y0;
       for(i=0;i<n;i++)
       {
              x=x+80*Math.cos(i*dig);
              y=y+80*Math.sin(i*dig);
              context.lineTo(x,y);
       }
       context.lineTo(x0,y0);
      }
       context.stroke();
   }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出边长相等的正多边形（从正三角形到正十边形），如图2所示。
<img src="https://img2018.cnblogs.com/common/1485495/201912/1485495-20191223203432648-1954329327.png"> 
图2  边长相等的正多边形
<h3>3．漂亮的圆盘</h3>
        在圆周上取N等分点，将这N个等分点两两用线段相连，共连N*(N-1)/2条边，可以绘制出圆盘图案。编写的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,400);
     context.strokeStyle="red";
     context.lineWidth=1;
     var x=new Array(25);
     var y=new Array(25);
     var r = 180;
     var n=25;
     for (i = 0; i <n; i++)
     {
        x = r * Math.cos(2 *Math.PI * i/n) + 200;  
        y = r * Math.sin(2 *Math.PI * i/n) + 200;  
     }
     context.beginPath();
     for (i = 0; i <n-1; i++)
     {
        for (j = i + 1; j <n ; j++)
        {
            context.moveTo(x,y);
            context.lineTo(x,y);
        }
     }
     context.closePath();
     context.stroke();
  }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="400">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出漂亮的圆盘图案，如图3所示。
<img src="https://img2018.cnblogs.com/common/1485495/201912/1485495-20191223203509118-1051828449.png"> 
图3  圆盘图案
<h3>4．顶点在圆周上的连续线段</h3>
        前面例子中，圆周上取点的参数方程的夹角θ都在0~2π之间，若将θ乘以一个参数k，可绘制出一些有趣的图形。编写的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.fillStyle = "cyan"; 
     context.strokeStyle = 'red'; 
     context.lineWidth=1;
     var k=11;
     var dig=Math.PI/12*k;
     var radius=100;
     var dx = 150; 
     var dy = 150; 
     context.beginPath(); 
     var x = radius*Math.sin(0)+dx; 
     var y = radius*Math.cos(0)+dy;
     context.moveTo(x,y); 
     for(var i = 1; i < 24; i++)
     { 
        var x = radius*Math.sin(i * dig); 
        var y = radius*Math.cos(i * dig); 
        context.lineTo(dx+x,dy+y); 
     }    
     context.closePath(); 
     context.fill(); 
     context.stroke(); 
  }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图4所示的图案。
<img src="https://img2018.cnblogs.com/common/1485495/201912/1485495-20191223203555168-676093359.png"> 
图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="#EEEEDD";
     context.fillRect(0,0,300,300);
     context.fillStyle = 'cyan'; 
     context.strokeStyle = 'red'; 
     context.globalCompositeOperation ='and'; 
     context.lineWidth=1;
     var dig=Math.PI/15*11;
     var radius=100;
     var dx = 150; 
     var dy = 150; 
     context.beginPath(); 
     for(var i = 0; i < 30; i++)
     { 
        var x = radius*Math.sin(i * dig); 
        var y = radius*Math.cos(i * dig); 
        context.bezierCurveTo(dx+x,dy+y-100,dx+x+100,dy+y,dx+x,dy+y); 
     }    
     context.closePath(); 
     context.fill(); 
     context.stroke(); 
  }
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300">您的浏览器不支持canvas！
</canvas>
</body>
</html>
        在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图5所示的图案。
<img src="https://img2018.cnblogs.com/common/1485495/201912/1485495-20191223203626741-2115507103.png"> 
图5   终点分布在圆周上的贝塞尔曲线 
来源：https://www.cnblogs.com/cs-whut/p/12088234.html

頁: [1]

琼殿技术论坛's Archiver

JavaScript图形实例：正多边形