绘制直线

常用绘制路径方法：

beginPath()  //新建一条路径

closePath()  //结束一条路径

moveTo(x, y) // 画线的开始坐标点

lineTo(x, y)  // 绘制直线

stroke()  //描边

fill()  //填充

绘制线段

window.onload = function(){
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();   /*开始新的路径*/
    ctx.moveTo(250, 250);  /*线的起点*/
    ctx.lineTo(300, 300);  /*线的终点*/
    ctx.stroke();    /*渲染*/
};

绘制折线

window.onload = function(){
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(250, 250);
    ctx.lineTo(300, 300);
    ctx.lineTo(100, 200);
    ctx.stroke();
};

闭合路径

window.onload = function(){
    var cvs = document.getElementById("cvs");
    var ctx = cvs 
    ctx.beginPath();
    ctx.moveTo(250, 250);
    ctx.lineTo(300, 300);
    ctx.lineTo(100, 200);
    ctx.closePath();
    ctx.stroke();
};

绘制扇形

window.onload = function(){
    var cvs = document.getElementById("cvs");
    var ctx = cvs.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(250, 250);
    ctx.arc(250, 250, 100, 0, Math.PI/4);  /*绘制圆弧*/
    ctx.fill();  /*填充*/
};

绘制曲线

window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');

      ctx.beginPath();
      ctx.moveTo(30,96);
      ctx.lineTo(70,66);
      ctx.lineTo(103,76);
      ctx.lineTo(170,15);
      ctx.stroke();
    };

绘制连接线

window.onload = function() {
    var ctx = document.getElementById('canvas').getContext('2d');
    var lastX = 200;
    var lastY = 200;

    ctx.onmousedown = function(ev){
        paint(ev.offsetX, ev.offsetY);
    }

    function paint() {
       ctx.beginPath();
       ctx.moveTo(lastX,lastY);
       ctx.lineTo(x,y);
       ctx.stroke();

       // 记录x和y上一次的值
       lastX = x;
       lastY = y;
      }
    };

线条样式