了解CanvasRenderingContext2D.quadraticCurveTo()

    简介

    CanvasRenderingContext2D.quadraticCurveTo()用来绘制二次贝塞尔曲线。它需要两点。 第一个点是控制点,第二个点是终点。起点是当前路径中的最后一个点,可以在创建二次贝塞尔曲线之前使用moveTo()更改。

    相比贝赛尔曲线绘制方法bezierCurveTo(),少了一个控制点。

    语法

    context.quadraticCurveTo(cpx, cpy, x, y);

    参数

    各个参数含义和作用如下:

    cpx
    Number
    控制点的横坐标。
    cpy
    Number
    控制点的纵坐标。
    x
    Number
    结束点的横坐标
    y
    Number
    结束点的纵坐标

    案例

    灰色是起始点(不能拖动),红色是控制点,绿色是结束点,拖动可以感受下二次贝塞尔曲线的绘制效果:

    JavaScript实时运行代码:

    // 开始绘制
    context.beginPath();
    context.moveTo(50, 50);
    context.quadraticCurveTo(100, 100, 250, 100);
    context.stroke();

    其他

    规范文档

    规范地址 规范状态 备注
    HTML现行标准
    这个规范中定义了'CanvasRenderingContext2D.quadraticCurveTo'
    现行标准 -

    相关资源

    兼容性

    IE9+支持,全兼容。


    by zhangxinxu 2018-10-15 23:54:34