如何绘制路径-线段

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);
} 

查看更多关于如何绘制路径-线段的详细内容...