1.5 绘制锯齿线

优质

小牛编辑

125浏览

2023-12-01

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

绘制步骤

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

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，并且直线子路径之间的夹角相对较小时，不同连接样式就很明显。