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 相关文章推荐
CSS中的字体大小设置属性总结
May 24 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
May 02 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
Jan 03 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
html5使用canvas绘制一张图片
Dec 15 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
HTML5 canvas基本绘图之绘制线条
Jun 27 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 HTML / CSS
HTML中meta标签及Keywords
Apr 15 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应用技巧
2008/03/27 PHP
Php中用PDO查询Mysql来避免SQL注入风险的方法
2013/04/25 PHP
win7下memCache的安装过程(具体操作步骤)
2013/06/28 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
PHP浮点比较大小的方法
2016/02/14 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
解决在laravel中auth建立时候遇到的问题
2019/10/15 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
2013/03/29 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
原生JS实现平滑回到顶部组件
2016/03/16 Javascript
JavaScript动态生成二维码图片
2016/04/20 Javascript
JavaScript实现form表单的多文件上传
2020/03/27 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Python Socket传输文件示例
2017/01/16 Python
Python类的动态修改的实例方法
2017/03/24 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
python爬虫获取多页天涯帖子
2018/02/23 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
python 列表转为字典的两个小方法(小结)
2019/06/28 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python-Seaborn热图绘制的实现方法
2019/07/15 Python
Pycharm远程调试原理及具体配置详解
2019/08/08 Python
python匿名函数的使用方法解析
2019/10/10 Python
Python中pyecharts安装及安装失败的解决方法
2020/02/18 Python
医学专业职业生涯规划范文
2014/02/05 职场文书
工作鉴定评语
2014/05/04 职场文书
教师竞聘演讲稿
2014/05/16 职场文书
教师旷工检讨书
2015/08/15 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang
Golang 1.18 多模块Multi-Module工作区模式的新特性
2022/04/11 Golang