作者：主播新鲜看连 | 来源：互联网 | 2020-08-07 10:14
Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的，但是文本不算是图形。基于路径的绘制系统大多数绘制系统，如：SVG(ScalableVerctorGraphics,可缩放的矢量图形)，AdobeIllustrator等
Canvas绘图环境中有些属于立即绘制图形方法，有些绘图方法是基于路径的。立即绘制图形方法仅有两个strokeRect(),fillRect(),虽然strokezText(),fillText()方法也是立即绘制的，但是文本不算是图形。
基于路径的绘制系统
大多数绘制系统，如：SVG(Scalable Verctor Graphics, 可缩放的矢量图形)，Adobe Illustrator等，都是基于路径的，
使用这些绘制系统时，你需要先定义一个路径，然后再对其进行描边或填充，也可以描边加填充这样图形才能显示出来。
Canvas中的三种绘制方式：
绘制一条线段
Canvas绘图环境中，线段也是基于路径绘制的，称为线性路径，创建线性路径的方法：moveTO()与lineTo()，在创建路径之后调用stroke()方法，才能在Canvas中画出线段出来。
这就是前面我们所说的基于路径的绘制方法，必须对其进行描边或者填充；
通常两点连一线因此绘制线段非常简单，通过moveTO()指定线的起点，通过lineTo()移动到另一个点。
function drawLine(){
cxt.moveTo(50, 50);
cxt.lineTo(100, 100);
}然而这样我们在画布中是看不见线段的，前面我们说到基于路径的绘制方法，必须要描边或者填充。所以要想看到结果，我们必须还要使用stroke()方法。
因此我们把方法修改成下面这样就会绘制出一条线段
function drawLine(){
cxt.moveTo(50, 50);
cxt.lineTo(200, 200);
cxt.stroke();
}我们只使用lineTo()也是能在画布中绘制出线段的，我们把上面的代码改成如下面所示，效果也是一样的
function drawLine(){
cxt.lineTo(50, 50);
cxt.lineTo(200, 200);
cxt.stroke();
}总结下moveTo()与lineTo()的用法
moveTo(x,y): 将笔触移动到指定的坐标x以及y上，向当前路径中增加一条子路径，该方法不会清除当前路径中的任何子路径。
lineTo(x,y): 绘制一条从当前位置到指定x以及y位置的直线，如果当前路径中没有子路径，那么这个方法的行为与moveTo()一样。如果当前路径中存在子路径，此方法会将你所指定的这个点加入子路径中。
改变线段的样式
改变线段的宽度
function= 14;
cxt.lineTo(50, 50);
cxt.lineTo(200, 200);
cxt.stroke();
}
改变线段的颜色
function drawLine(){
cxt.lineWidth = 14;
cxt.strokeStyle = &＃39;green&＃39;;
cxt.lineTo(50, 50);
cxt.lineTo(200, 200);
cxt.stroke();
}
我们还可以利用CanvasGradient对象或者CanvasPattern对象给线段添加渐变色或图案
function drawLine(){
cxt.lineWidth = 14;var gradient = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2);
gradient.addColorStop(0, &＃39;blue&＃39;);
gradient.addColorStop(0.5, &＃39;purple&＃39;);
gradient.addColorStop(1, &＃39;yellow&＃39;);
cxt.strokeStyle = gradient;
cxt.lineTo(50, 50);
cxt.lineTo(200, 200);
cxt.stroke();
}
beginPath()与closePath()
从上面canvas中的三种绘制方式中我们可以看出，第二行的弧形路径是开放路径，最后一行的弧形是封闭路径。那么封闭的路径是怎么实现的呢？
下面我们来看看canvas中路径绘制中两个比较重要的方法
先绘制出一条折线
function drawLine(){
cxt.strokeStyle = &＃39;green&＃39;;
cxt.lineWidth = 2;
cxt.moveTo(50, 50);
cxt.lineTo(50, 150);
cxt.lineTo(150, 150);
cxt.stroke();
}可以看出我们在画布中绘制了两条路径
注意：调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（）。所以我们在绘制图形的时候一定要先使用beginPath()。
我们继续修改我们的代码
function drawLine(){//描边三角形cxt.strokeStyle = &＃39;green&＃39;;
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(50, 50);
cxt.lineTo(50, 150);
cxt.lineTo(150, 150);
cxt.closePath();
cxt.stroke();//折线cxt.translate(150, 0);
cxt.strokeStyle = &＃39;red&＃39;;
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(50, 50);
cxt.lineTo(50, 150);
cxt.lineTo(150, 150);
cxt.stroke();
cxt.closePath();//绿色填充三角形cxt.translate(150, 0);
cxt.fillStyle = &＃39;green&＃39;;
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(50, 50);
cxt.lineTo(50, 150);
cxt.lineTo(150, 150);
cxt.fill();
cxt.closePath();//红色填充三角形cxt.translate(150, 0);
cxt.fillStyle = &＃39;red&＃39;;
cxt.lineWidth = 2;
cxt.beginPath();
cxt.moveTo(50, 50);
cxt.lineTo(50, 150);
cxt.lineTo(150, 150);
cxt.closePath();
cxt.fill();
}
线段与像素边界
先来看一个例子
function drawLine(){//描边三角形cxt.lineWidth = 1;
cxt.beginPath();
cxt.moveTo(50, 50);
cxt.lineTo(450, 50);
cxt.stroke();
cxt.beginPath();
cxt.moveTo(50.5, 150.5);
cxt.lineTo(450.5, 150.5);
cxt.stroke();
}
网格的绘制
既然我们已经明白了如何绘制真正的1像素的线段，那我们就开始绘制网格
function drawLine(stepx, stepy){
cxt.lineWidth = 0.5;
cxt.strokeStyle = &＃39;green&＃39;;//绘制竖线for(var i= stepx + 0.5; i上面例子中我们将线段绘制在两个像素之间的像素上，而且绘制出来的线段仅有0.5像素宽，
虽说canvas规范没有明文规定，不过所有浏览器的Canvas实现都使用了“抗锯齿”技术，以便创建出“亚像素”线段的绘制效果来
总结
本节内容主要讲解canvas中路径中线性路径的绘制方法，主要是利用 moveTo()定义起点，lineTo()定义终点，stroke()描绘当前路径。这三个方法绘制线段
canvas中绘制路径有两个重要的方法，beginPath()与closePath()。绘制图形之前先调用beginPath()是绘制多个图形必要的步骤。
closePath()在使用fill()时是可以省略的，而且还要注意closePath()方法的调用位置。
绘制线段时我们可以使用 lineWidth改变线段的宽度，strokeStyle改变线段的颜色。
弄清楚线段的像素边界，这样我们才能绘制出真正的1像素线宽的线段。
以上就是如何绘制路径-线段的详细内容，更多请关注 第一PHP社区 其它相关文章！
京公网安备 11010802041100号