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,js)
Dec 12 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 HTML / CSS
纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例
Nov 11 HTML / CSS
详解CSS3中强大的filter(滤镜)属性
Jun 29 HTML / CSS
详解css position 5种不同的值的用法
Jul 30 HTML / CSS
移动端适配 使px自动转换rem
Aug 26 HTML / CSS
使用CSS3实现字体颜色渐变的实现
Aug 10 HTML / CSS
使用分层画布来优化HTML5渲染的教程
May 08 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
关于canvas绘制模糊问题的解决方法
Sep 24 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 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验证码函数的使用示例
2013/05/03 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
CodeIgniter安全相关设置汇总
2014/07/03 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
php支付宝APP支付功能
2020/07/29 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
动态加载js文件 document.createElement
2006/10/14 Javascript
js实现的网页颜色代码表全集
2007/07/17 Javascript
jquery 框架使用教程 AJAX篇
2009/10/11 Javascript
Javascript实现的鼠标经过时播放声音
2010/05/18 Javascript
取消选中单选框radio的三种方式示例介绍
2013/12/23 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
Nodejs实现短信验证码功能
2017/02/09 NodeJs
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
JS开发中基本数据类型具体有哪几种
2017/10/19 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[13:55]Newbee vs Team Spirit
2018/06/07 DOTA
详尽讲述用Python的Django框架测试驱动开发的教程
2015/04/22 Python
Python上传package到Pypi(代码简单)
2016/02/06 Python
pycharm执行python时,填写参数的方法
2018/10/29 Python
python实现文件的备份流程详解
2019/06/18 Python
Django分页功能的实现代码详解
2019/07/29 Python
使用python模拟命令行终端的示例
2019/08/13 Python
详解Python文件修改的两种方式
2019/08/22 Python
Python configparser模块封装及构造配置文件
2020/08/07 Python
毕业生实习鉴定
2013/12/11 职场文书
大学生村官心得体会范文
2014/01/04 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
Golang二维数组的使用方式
2021/05/28 Golang