了解CanvasRenderingContext2D.bezierCurveTo()
简介
可以使用moveTo()
作为起始点。,第3个点是结束点,前2个点是控制点,而起始点是当前路径的最后一个控制点,CanvasRenderingContext2D.bezierCurveTo()
用来绘制贝塞尔曲线。需要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