HTML5 Canvas实战
1.6 绘制螺旋线
阅读(

路径和文本

绘制直线

绘制圆弧

绘制二次曲线

绘制贝塞尔曲线

绘制锯齿线

绘制螺旋线

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

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

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验