HTML5 Canvas实战
1.5 绘制锯齿线
阅读(

路径和文本

绘制直线

绘制圆弧

绘制二次曲线

绘制贝塞尔曲线

绘制锯齿线

本节,通过反复连接直线子路径绘制锯齿线,我们来介绍路径。

绘制锯齿线
图1-9 绘制锯齿线

绘制步骤

按照以下步骤绘制一条锯齿线:

1. 定义2D画布并初始化锯齿参数:

window.onload  = function(){
  var canvas  = document.getElementById("myCanvas");
  var context  = canvas.getContext("2d");
  var startX  =  85;
  var startY  =  70;
  var zigzagSpacing  =  60;

2. 定义锯齿线样式,并开始一条路径:

  context.lineWidth  =  10;
  context.strokeStyle  = "#0096FF";  //蓝色context.beginPath();
  context.moveTo(startX, startY);

3. 绘制七条锯齿连接线,并且调用stroke()方法让锯齿路径可见:

 //绘制七条线
  for(var n  =  0; n  <  7; n++)  {
    var x  = startX  +  ((n  +  1)  * zigzagSpacing); 
    var y;
    if(n  %  2  ==  0)  {  //如果n是偶数
      y  = startY  +  100;
    }
    else {  //如果n是奇数
       y  = startY;
    }
    context.lineTo(x, y);
  }
  context.stroke();
};

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

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

工作原理

要绘制锯齿线,可以通过连接交替的对角线形成一条路径来实现。编程时,可以通过循环绘制对角线来实现,当迭代次数为奇数时,绘制向上并向右的对角线,当迭代次数为偶数时,绘制向下并向右的对角线。

本节要注意的关键是beginPath()方法,该方法实质上是声明正在绘制一条路径,该路径中,通过每条直线子路径终点,来定义下一条子路径的起点。如果不使用beginPath()方法,要确保上一条线段的终点与当前线段的起点相匹配,我们就不得不使用moveTo()为每条线段定位画布上下文,这样既乏味又冗余。正如在下一章将要看到的,beginPath()方法也是创建图形的一个必要步骤。

连接点样式

注意到了吧,两条线段的连接点好尖啊!这是因为,默认情况下,HTML5画布路径连接点的样式是miter(尖角)。作为选择,我们也可以通过lineJoin属性,把连接点的样式设置为round(圆角)或bevel(斜角)。

如果线段很细,并且不是以大角度连接,要分辨出不同连接样式,可能有点难。通常情况下,当路径的宽度超过5px,并且直线子路径之间的夹角相对较小时,不同连接样式就很明显。

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验