canvas画线

效果如图：

1、html

<div>
                <canvas id="myCanvas" width="600" height="200" style="border: 1px solid #ccc;">
                    您的浏览器不支持canvas，请升级浏览器
                </canvas>
            </div>

2.js

window.onload = function () {
    var cav = document.getElementById('myCanvas'); //获取canvas元素
    var ctx = cav.getContext('2d'); //获取cav上下文，创建ctx对象，以获取允许进行绘制的2d环境
    ctx.fillStyle = '#f60'; //颜色填充
    ctx.fillRect(0,0,100,100);


    //绘制直线
    /*beginPath()定义了一个新的路径绘制动作的开始
     moveTo()为指定点创建了一个新的子路径，这个点就变成了新的上下文的点
     lineTo()以上下文点为起点，到方法参数中指定的点之间画一条直线。
     stroke()为所画的线赋予颜色，并使其可见，如果没有特别指定的颜色的话，则默认使用黑色画直线*/
    ctx.beginPath();
    ctx.moveTo(130,50);
    ctx.lineTo(200,50);
    ctx.lineWidth = 20; //线的宽度
    ctx.strokeStyle = '#ff0000'; //线的颜色
    ctx.lineCap='round'; //线的两头圆滑
    ctx.stroke();

    //绘制弧线和曲线
    /*arcTo()在画布上创建介于两个切线之间的弧/曲线
    quadraticCurveTo()绘制二次曲线，每条二次曲线要由上下文点、一个控制点和一个终止点来定义
    bezierCurveTo()绘制贝塞尔曲线，每条贝塞尔曲线要由上下文点、两个控制点和一个终止点来确定。由于贝塞尔曲线
    有两个控制点，因此比二次曲线更加的复杂多变*/
    //绘制弧线
    ctx.beginPath();
    ctx.moveTo(200,100);
    ctx.lineTo(300,100);
    ctx.arcTo(350,100,350,130,50);
    ctx.lineTo(350,170);
    ctx.stroke();

    //绘制二次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(200,50);
    ctx.quadraticCurveTo(280,0,380,150);
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'blue';
    ctx.stroke();

    //绘制三次贝塞尔曲线
    ctx.beginPath();
    ctx.moveTo(400,100);
    ctx.bezierCurveTo(280,10,500,10,580,170);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#0ff';
    ctx.stroke();

    //复杂路径
    ctx.beginPath();
    ctx.moveTo(120,30);
    //第一条直线
    ctx.lineTo(220,160);
    //二次曲线
    ctx.quadraticCurveTo(250,200,270,120);
    //贝尔塞尔曲线
    ctx.bezierCurveTo(300,-40,330,200,400,150);
    //第二条直线
    ctx.lineTo(500,90);
    ctx.lineWidth = 5;
    ctx.strokeStyle = '#333';
    ctx.stroke();
};