使用HTML5的Canvas绘制曲线的简单方法


Posted in HTML / CSS onSeptember 08, 2015

Canvas2D自带的曲线方法

最近在研究3D柔体的计算,所以在狂补一些知识。经常会涉及到一些数值分析方面的东西,主要是曲线的各种插值算法。突然想起了Canvas2D本身也是可以绘制曲线的,使用的是二次和三次的贝兹曲线。其实我也一直没用它的过这个方法,现在就来试试吧~

这篇只是说说简单的曲线绘制,咱就不说一大堆复杂的原理了。况且贝兹曲线这东西的原理本身很简单,看看维基百科就能明白。其实很多绘图工具中的简单曲线绘制都是使用贝兹曲线的,如果你用过windows自带绘图工具中的曲线就一定不陌生。可以先拖出一条直线,然后点击某个位置让直线扭曲。一开始的拖动动作就是决定曲线的两个顶点,点击动作就是添加中间点。在windows自带的绘图工具使用的是三次贝兹曲线,你可以添加两个中间点。贝兹曲线和一般的多项式插值不同,它的中间点只是作为控制点用的,并不是曲线必须经过的顶点。而且它还可以做出闭曲线。Canvas2D中有提供两个绘制曲线的方法

quadraticCurveTo:二次贝兹曲线

bezierCurveTo:三次贝兹曲线

线条是从当前所在位置开始画的,可以用moveTo方法来指定当前位置。有了曲线的开始位置后,还需要中间点和结束位置。把这些位置坐标传给绘制函数即可。比如二次贝兹曲线需要一个中间点和一个结束位置,所以要传两个坐标给quadraticCurveTo函数。坐标是由x和y组成的,也就是说这个函数有4个参数。bezierCurveTo也是一样的,只是它有两个中间点而已。下面咱就来用用看

CSS Code复制内容到剪贴板
  1. <canvas id="canvas" width="200" height="200"></canvas>   
  2. <script>   
  3. var g=canvas.getContext("2d");   
  4. //普通的直线   
  5. g.beginPath();   
  6. g.strokeStyle="#CCC";   
  7. g.moveTo(0,0);   
  8. g.lineTo(200,0);   
  9. g.lineTo(0,200);   
  10. g.lineTo(200,200);   
  11. g.stroke();   
  12. //贝兹曲线   
  13. g.beginPath();   
  14. g.strokeStyle="#F00";   
  15. g.moveTo(0,0);   
  16. g.bezierCurveTo(200,0, 0,200, 200,200);   
  17. g.stroke();   
  18. </script>  

使用HTML5的Canvas绘制曲线的简单方法
这个按照Z字形的轨迹给定四个点,画出了普通的直线和贝兹曲线。这只是普通的曲线而已,贝兹曲线的厉害之处是它可以画出闭曲线,比如这样一段代码

CSS Code复制内容到剪贴板
  1. g.beginPath();   
  2. g.strokeStyle="#00F";   
  3. g.moveTo(100,0);   
  4. g.bezierCurveTo(-100,200, 300,200, 100,0);   
  5. g.stroke();  

使用HTML5的Canvas绘制曲线的简单方法

把三次贝兹曲线的开始位置和结束位置设置到同一点上就可以画出闭曲线。因为贝兹曲线的插值方向不是按照坐标轴走的,所以可以绘制出闭曲线。如果想让多项式插值绘制出闭曲线我们就得转换参数,使用极坐标系来完成。

我使用的例子都是三次贝兹曲线。其实二次的也一样,只是少了个中间点就画不出我想要的东西了。我就不再??乱淮蠖蚜耍?馄?驼庋?? =。。

HTML / CSS 相关文章推荐
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
CSS3中各种颜色属性的使用教程
May 17 HTML / CSS
用CSS3实现无限循环的无缝滚动的实例代码
Jul 04 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
Jun 16 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
深入剖析HTML5 内联框架iFrame
May 04 HTML / CSS
HTML5中原生的右键菜单创建方法
Jun 28 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 HTML / CSS
微信小程序纯CSS实现无限弹幕滚动效果
Sep 23 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 #HTML / CSS
深入解析HTML5中的Blob对象的使用
Sep 08 #HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
Sep 02 #HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 #HTML / CSS
详解HTML5中的元素与元素
Aug 17 #HTML / CSS
详解HTML5中download属性的应用
Aug 06 #HTML / CSS
详解HTML5中div和section以及article的区别
Jul 14 #HTML / CSS
You might like
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
基于php设计模式中单例模式的应用分析
2013/05/15 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
PHP中使用glob函数实现一句话删除某个目录下的所有文件
2014/07/22 PHP
php实现通用的信用卡验证类
2015/03/24 PHP
如何打开php的gd2库
2017/02/09 PHP
PHP扩展Swoole实现实时异步任务队列示例
2019/04/13 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
几个常用的JavaScript字符串处理函数 - split()、join()、substring()和indexOf()
2009/06/02 Javascript
基于jquery的图片懒加载js
2010/06/30 Javascript
浅谈jQuery框架Ajax常用选项
2017/07/08 jQuery
基于JavaScript实现选项卡效果
2017/07/21 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
解决layui表格内文本超出隐藏的问题
2019/09/12 Javascript
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
Python yield 使用浅析
2015/05/28 Python
pandas获取groupby分组里最大值所在的行方法
2018/04/20 Python
Python实现随机生成手机号及正则验证手机号的方法
2018/04/25 Python
Python线性拟合实现函数与用法示例
2018/12/13 Python
Python实现查找字符串数组最长公共前缀示例
2019/03/27 Python
基于Django框架的权限组件rbac实例讲解
2019/08/31 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
上海天奕面试题笔试题
2015/04/19 面试题
什么是servlet
2012/05/08 面试题
药物学专业学生的自我评价
2013/10/27 职场文书
销售演讲稿范文
2014/01/08 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
园林技术专业求职信
2014/07/28 职场文书
2015年综治宣传月活动总结
2015/03/25 职场文书
烈士陵园扫墓感想
2015/08/07 职场文书
如何写好开幕词?
2019/06/24 职场文书
创业计划书之个人工作室
2019/08/22 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
Pytorch DataLoader shuffle验证方式
2021/06/02 Python