我的处女作《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二次方贝塞尔曲线 实现复选框对勾对号 实现圆角三角形 圆角矩形(图文 示例)