1.6 绘制螺旋线

优质

小牛编辑

128浏览

2023-12-01

注意，本节可能会使你昏昏欲睡。本节，通过连接一系列短线，我们将绘制一条螺旋线路径。

绘制步骤

按照以下步骤绘制一条有圆心的螺旋线：

1. 定义2D画布并初始化螺旋参数：

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas"); 
  var context = canvas.getContext("2d");
  var radius  =  0;
  var angle   =  0;

2. 设置螺旋线样式：

 context.lineWidth  =  10;
  context.strokeStyle  = "#0096FF";  // blue-ish color context.beginPath();
  context.moveTo(canvas.width  /  2, canvas.height  /  2);

3. 围绕画布中心旋转3圈（每圈迭代50次），旋转时，在每个迭代中，半径增加0.75，并调用lineTo()方法从上一个点到当前点绘制线段。最后，调用stroke()方法让螺旋线可见。

 for (var n = 0; n < 150; n++)  {
    radius +=  0.75;
    angle  +=  (Math.PI  *  2)  /  50;  //每50次迭代一个完整圆周
    var x   = canvas.width  /  2  + radius  * Math.cos(angle); 
    var y   = canvas.height  /  2  + radius  * Math.sin(angle); 
    context.lineTo(x, y);
  }
  context.stroke();
};

4. 在HTML文档的body部分嵌入canvas标签：

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要在HTML5的画布中绘制螺旋线，首先把画笔置于画布的中心点，并围绕该中心反复增加半径和角度，并从上一个点到当前点绘制很短的直线。思考这个问题的另一种方法是，把自己想象为一个小孩，手持粉笔站在人行道上，你弯下腰来把粉笔放在人行道上，然后慢慢转动身体（但不要转的太快，除非你想把自己转晕然后倒在人行道上）在人行道上画圈。在转动身体的同时，把粉笔向身体外侧缓缓移动。经过几圈之后，你就画出一条平滑的螺旋线。