了解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 2019-10-18 01:44:05

     返回顶部