Canvas 绘制直线

Canvas 绘制直线

1.canvas绘图是一种基于状态的绘图，绘图的过程应该是先设置绘图的状态，再调用具体的函数进行绘制。
例如绘制一条（100,100）到（700,700）的直线：

context.moveTo (100,100); //设置起点状态
context.lineTo (700,700); //设置末端状态
context.lineWidth = 5; //设置线宽状态
context.strokeStyle = “#222” ; //设置线的颜色状态
context.stroke(); //进行绘制

2.当我们要绘制两条有不同颜色的折线时:

    window.onload = function(){

        var canvas = document.getElementById("canvas");

        canvas.width = 800;
        canvas.height = 800;
        var context = canvas.getContext('2d');

        context.moveTo(100,200);
        context.lineTo(300,400);
        context.lineTo(100,600);
        context.lineWidth = 10;
        context.strokeStyle = "red";
        context.stroke();
        context.moveTo(300,200);
        context.lineTo(500,400);
        context.lineTo(300,600);
        context.lineWidth = 10;
        context.strokeStyle = "green";

        context.stroke();      
    }

上述代码并不能达到效果，这是由于canvas是基于状态的，在每一次进行绘制的时候，canvas不是简单的将上一段代码进行绘制，而是检查在整个程序中设置的所有状态，基于这些状态完成一次绘制。所以context.strokeStyle = "green"会覆盖前面的context.strokeStyle = "red"，最终两个箭头都是绿色的，如果我们要实现不同状态的绘制可以使用context.beginPath()，context.beginPath()声明从现在开始进行一段新的绘制。当使用context.beginPath()后，在指定新的路径，再调用新的绘制函数将会采用context.beginPath()之后设置的新的状态来进行绘制：

        context.beginPath();
        context.moveTo(100,200);
        context.lineTo(300,400);
        context.lineTo(100,600);
        context.lineWidth = 10;
        context.strokeStyle = "red";
        context.stroke();

        context.beginPath();
        context.moveTo(300,200);
        context.lineTo(500,400);
        context.lineTo(300,600);
        context.lineWidth = 10;
        context.strokeStyle = "green";
        context.stroke(); 

3.当我们要绘制一个封闭的图形时，可以通过设置点的状态来描绘，例如：

        context.moveTo(100,350);
        context.lineTo(500,350);
        context.lineTo(500,200);
        context.lineTo(700,400);
        context.lineTo(500,600);
        context.lineTo(500,450);
        context.lineTo(100,450);
        context.lineTo(100,350);

        context.lineWidth = 10;
        context.fillStyle = "rgb(2,33,42)"; //指定填充颜色
        context.fill(); //对多边形进行填充
        context.strokeStyle = "blue";
        context.stroke();

但这样写有时候会出现一些瑕疵，比如说上面代码描绘的封闭图形由于border宽为10px，因此最后绘制出来的图形会缺个角

另一种方式是将整个图形的路径放在context.beginPath()和context.closePath()之中，这样就可以避免上述问题，canvas会自动帮我们解决上述问题。

        context.beginPath();
        context.moveTo(100,350);
        context.lineTo(500,350);
        ...
        context.closePath();

context.beginPath()和context.closePath()可以将多个路径分开，只要在每个路径的首尾使用context.beginPath()和context.closePath()。当我们绘制一个非封闭的图形时使用context.closePath()，它会将图形的首尾用一条线连接起来形成一个封闭的图形。context.beginPath()和context.closePath()不一定要成对出现，context.beginPath()表示要开始规划一个新的路径，context.closePath()代表要结束当前的路径，如果当前的路径没有封闭上的话会自动让它封闭上。context.beginPath()和context.closePath()是绘制封闭多边形的标准做法。
4.当我们要绘制一个有填充颜色且有描边的图案时，应该先填充颜色（context.fill()）再描边（context.stroke()），否则，填充色会覆盖线条边框内侧，导致描边的线条宽度看起来变小了。