html源码画螺旋,1.6 绘制螺旋线 - HTML5 Canvas 实战

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

图1-10 绘制螺旋线

绘制步骤

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

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 

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标签：

工作原理

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