了解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