html5 字体锯齿,1.5 绘制锯齿线 - HTML5 Canvas 实战

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

图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 

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

工作原理

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

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

连接点样式

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

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