了解CanvasRenderingContext2D.bezierCurveTo()

    简介

    如果之前并无路径，前2个点是控制点，CanvasRenderingContext2D.bezierCurveTo()用来绘制贝塞尔曲线。需要3个控制点，而起始点是当前路径的最后一个控制点，可以使用moveTo()作为起始点。，第3个点是结束点

    贝塞尔曲线非常强，可以用来绘制各种曲线图形，包括正规的圆和椭圆等，熟练掌握必可成为图形绘制方面的高手。

    如果之前对贝塞尔曲线不太了解，就能脑补出大致控制点在什么位置，甚至，直接看到目标曲线，对于控制点对线条形状的影响会有更加具象的认知，建议可以先用一用设计软件中的钢笔或者路径绘制工具，可以更好地理解这里的绘制表现，不过是比较多的积累之类才能到达的境界。

    语法

    context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);

    参数

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

    cp1x
    Number
    第1个控制点的横坐标。
    cp1y
    Number
    第1个控制点的纵坐标。
    cp2x
    Number
    第2个控制点的横坐标。
    cp2y
    Number
    第2个控制点的纵坐标。
    x
    Number
    结束点的横坐标
    y
    Number
    结束点的纵坐标

    案例

    灰色是起始点，红色是两个控制点，其中有1个白点的是第1个控制点，有2个白点的是第2个控制点，绿色是结束点，拖动可以感受下贝塞尔曲线的绘制效果：

    JavaScript实时运行代码：

    context.beginPath();
context.moveTo(50, 50);
context.bezierCurveTo(100, 100, 200, 40, 250, 100);
context.stroke();

    其他

    规范文档

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

    相关资源

    兼容性

    IE9+支持，全兼容。

    by zhangxinxu 2019-10-18 01:44:03

     返回顶部