我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：/827652549/CanvasStudy

什么是贝塞尔曲线？

贝塞尔曲线是一种向指定方向弯曲的简单曲线。而二次方贝塞尔曲线，就是只向一种只向一个方向弯曲的简单曲线，可以实现很纯粹的自然弯曲的效果。

当然，三次方贝塞尔曲线是向两个方向弯曲的效果，后续教程会继续介绍。

这里，便是使用了quadraticCurveTo()方法来实现二次方贝塞尔曲线的效果。

quadraticCurveTo()方法的用法

方法 描述 quadraticCurveTo(double cpx,double cpy,double x,double y) 创建一个表示二次方贝塞尔曲线的路径。该方法需要传入两个点，第一个是曲线的控制点，第二个是锚点（结束点）。

提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用beginPath()和moveTo()方法来定义开始点。

开始点：moveTo(20,20)控制点：quadraticCurveTo(20,100,200,20)结束点：quadraticCurveTo(20,100,200,20)

实现复选框的对勾

用Canvas实现复选框的对勾，也就是对号，并不难，你可以使用两条贝塞尔曲线，也可以使用三条贝塞尔曲线，如果你愿意，你甚至可以将上图当做你想要的对勾效果，但那并不是我想要的。你使用得越多，你就可以调节地越精致，我这里使用三条贝瑟尔曲线来实现这样一个对勾效果。

这就是我实现的对勾效果，看起来比直边的对勾好看多了。

在线示例 详细代码

实现圆角三角形

圆角的实现，我们可以使用lineCap，但它并不能很自由地调节角的弯曲程度；我们也可以使用线段加圆弧，虽然可以实现弯曲程度的调节，但是不利于代码的简洁性，而且考虑起来也比较复杂。那么，二次方贝瑟尔曲线既可以实现圆角，也可以自由地调节角度。

这里我们给出一个圆角三角形的案例，圆角矩形同理，便不再过多书写代码。

为了演示方便和让大家更容易理解贝塞尔曲线，这里将为圆角三角形添加控制点（白色）和锚点（蓝色）的颜色标记，方便对比位置。

在线演示 详细代码

这里其实就是通过三个贝塞尔曲线来实现圆角的功能，而圆角就相当于拖拽“白点”拉伸而成，只要通过调控白点的位置（quadraticCurveTo()的第一对参数），就能自由调节圆角的弯曲程度，当然，这个示例并没有实现拖拽调节功能，如果你愿意，你可以继续实现拖拽调节功能。

贝塞尔曲线动态图片引用：/hyb1/p/3875468.html

【绘制】HTML5 Canvas二次方贝塞尔曲线 实现复选框对勾对号 实现圆角三角形 圆角矩形（图文 示例）