HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线


Posted in HTML / CSS onJanuary 01, 2015

在HTML5 Canvas中,可以用以下方法描画三阶和二阶的贝塞尔曲线:

复制代码
代码如下:

context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
context.quadraticCurveTo(cpx, cpy, x, y)

贝塞尔曲线是在二维平面上由一个“起始点”,一个“结束点”,以及一个或多个“控制点”定义的曲线。普通的三阶贝塞尔曲线使用两个控制点,而二阶曲线则只使用一个控制点。

要描画二阶贝塞尔曲线,只需设置结束点的坐标和控制点的坐标即可:

复制代码
代码如下:

context.moveTo(0,0);
context.quadraticCurveTo(100,25,0,50);

代码执行结果如下:

HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线

上面例子中的曲线从坐标(0,0)开始,到(0,50)结束,而用于控制曲线描绘的控制点的坐标为(100,25)。

相比二阶曲线,由于可以设置两个控制点,三阶贝塞尔曲线的描画更为灵活。下面的代码描画了一条”S”形的曲线:

复制代码
代码如下:

context.moveTo(150,0);
context.bezierCurveTo(0,125,300,175,150,300);

HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线

译注1:关于贝塞尔曲线,可以参考Wikipedia上的条目(http://en.wikipedia.org/wiki/Bézier_curve),其中的动画很好地诠释了贝塞尔曲线的生成机制。

译注2:目前HTML5 Canvas最高仅支持三阶贝塞尔曲线,四阶以上的曲线尚不支持。

HTML / CSS 相关文章推荐
利用CSS3的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
css3制作彩色边线3d立体按钮的示例(css3按钮)
May 06 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3毛玻璃效果(blur)有白边问题的解决方法
Nov 15 HTML / CSS
CSS3 真的会替代 SCSS 吗
Mar 09 HTML / CSS
HTML5 video视频字幕的使用和制作方法
May 03 HTML / CSS
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
Jan 06 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
Mar 25 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
Mar 18 HTML / CSS
HTML中的表格元素介绍
Feb 28 HTML / CSS
css中有哪些方式可以隐藏页面元素及区别
Jun 16 HTML / CSS
HTML5制作酷炫音频播放器插件图文教程
Dec 30 #HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 #HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 #HTML / CSS
浅谈html5 响应式布局
Dec 24 #HTML / CSS
HTML5进度条特效
Dec 18 #HTML / CSS
html5+svg学习指南之SVG基础知识
Dec 17 #HTML / CSS
canvas需要在标签里直接定义宽高
Dec 17 #HTML / CSS
You might like
PHP最常用的2种设计模式工厂模式和单例模式介绍
2012/08/14 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
前端必学之PHP语法基础
2016/01/01 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
JavaScript:Div层拖动效果实例代码
2013/08/06 Javascript
jQuery中html()方法用法实例
2014/12/25 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
浅谈node.js中async异步编程
2015/10/22 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
Javascript自定义事件详解
2017/01/13 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
2017/04/04 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
JavaScript 中的12种循环遍历方法【总结】
2018/05/31 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
vue 使用html2canvas将DOM转化为图片的方法
2018/09/11 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
angular8和ngrx8结合使用的步骤介绍
2019/12/01 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python测试网络连通性示例【基于ping】
2018/08/03 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Python中生成ndarray实例讲解
2021/02/22 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
自我鉴定模板
2013/10/29 职场文书
公关关系专员的自我评价分享
2013/11/20 职场文书
大学毕业生的自我鉴定
2013/11/30 职场文书
擅自离岗检讨书
2014/02/11 职场文书
《大海那边》教学反思
2014/04/09 职场文书
敲诈同学钱财检讨书范文
2014/11/18 职场文书
2015初一年级组工作总结
2015/07/24 职场文书
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android