canvas学习总结三之绘制路径-线段

网格的绘制

既然我们已经明白了如何绘制真正的1像素的线段，那我们就开始绘制网格

function drawLine(stepx, stepy){
cxt.lineWidth = 0.5;
cxt.strokeStyle = 'green';
//绘制竖线
for(var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){
cxt.beginPath();
cxt.moveTo(i, 0);
cxt.lineTo(i, cxt.canvas.height);
cxt.stroke();
}
//绘制横线
for(var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){
cxt.beginPath();
cxt.moveTo(0, i);
cxt.lineTo(cxt.canvas.width, i);
cxt.stroke();
}
}
drawLine(10, 10);

上面例子中我们将线段绘制在两个像素之间的像素上，而且绘制出来的线段仅有0.5像素宽，

虽说canvas规范没有明文规定，不过所有浏览器的Canvas实现都使用了“抗锯齿”技术，以便创建出“亚像素”线段的绘制效果来

总结

本节内容主要讲解canvas中路径中线性路径的绘制方法，主要是利用 moveTo()定义起点，lineTo()定义终点，stroke()描绘当前路径。这三个方法绘制线段

canvas中绘制路径有两个重要的方法，beginPath()与closePath()。绘制图形之前先调用beginPath()是绘制多个图形必要的步骤。

closePath()在使用fill()时是可以省略的，而且还要注意closePath()方法的调用位置。

绘制线段时我们可以使用 lineWidth改变线段的宽度，strokeStyle改变线段的颜色。

弄清楚线段的像素边界，这样我们才能绘制出真正的1像素线宽的线段。

对canvas绘制图形感兴趣的同学，请持续关注后续更新，如有不对的地方也请指出并多多交流。