canvas之绘制贝塞尔曲线

绘制二次贝塞尔曲线(quadraticCurveTo)

canvas之绘制贝塞尔曲线_第1张图片

 //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后,还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();
    pencil.moveTo(20,40); //画笔着落在起始点

    //参数描述: 控制点x坐标、控制的y坐标; 结束点的x坐标,结束点的y坐标
    pencil.quadraticCurveTo(40,200,100,60);
    pencil.strokeStyle='green';
    pencil.stroke();

绘制三次贝塞尔曲线

三次贝塞尔曲线有两个控制点。二次贝塞尔曲线有一个控制点
canvas之绘制贝塞尔曲线_第2张图片

 //获取画布。  相当于拿到了绘画的一张纸
    var cas = document.getElementById('cvs');
    //有了纸后,还需要有一只笔才能进行绘画。 这是一个绘画2d图形的笔
    var pencil = cas.getContext('2d');

    //开始绘画
    pencil.beginPath();
    pencil.moveTo(20,20); //画笔着落在起始点

    //参数描述: 第一个控制点x坐标、第一个控制的y坐标; 第二个控制点x坐标、第二个控制的y坐标; 结束点的x坐标,结束点的y坐标
    pencil.bezierCurveTo(20,100, 200,100, 200,20)
    pencil.strokeStyle='green';
    pencil.stroke();

你可能感兴趣的:(前端)