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

所属分类: 网页制作 / html5 阅读数: 233
收藏 0 赞 0 分享

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>  


这个按照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梦幻之旅——炫丽的流星雨效果实现过程

流星出现的时候,人们都喜欢对着它们许愿,因为传说对着流星许下愿望后,愿望就能实现,最近出于兴趣,制作一个拖尾效果,后来想到可以通过拖尾效果来实现一下流星雨的效果
收藏 0 赞 0 分享

5个你不知道的HTML5的接口介绍

尽管当前的主流浏览器已经实现了很多的HTML5新特性,但是很多开发者根本就没注意到这些更简洁,也很有用的API,本系列文章介绍这些接口API,同时也希望能鼓励更多开发者去探索那些还不广为人知的API
收藏 0 赞 0 分享

HTML5 placeholder(空白提示)属性介绍

浏览器引入了许多的HTML5 特性其中我最喜欢的一个就是为input元素引入了placeholder属性,placeholder属性显示引导性文字直到输入框获取输入焦点,当有了用户输入内容后引导性内容将会自动隐藏
收藏 0 赞 0 分享

HTML5 自动聚焦(autofocus)属性使用介绍

一个简单的HTML功能是现在允许我们在页面加载完成后自动将输入焦点定位到需要的元素,通过一个叫做 autofocus的属性完成,感兴趣的朋友可以了解下
收藏 0 赞 0 分享

HTML5新增的Css选择器、伪类介绍

HTML5新增了Css选择器、伪类,本文整理了一些,并给出简单的使用介绍,喜欢html5的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

通过Canvas及File API缩放并上传图片完整示例

创建一个只管的用户界面,并允许你控制图片的大小。上传到服务器端的数据,并不需要处理enctype为 multi-part/form-data 的情况,仅仅一个简单的POST表单处理程序就可以了. 好了,下面附上完整的代码示例
收藏 0 赞 0 分享

Canvas与Image互相转换示例代码

本文向大家展示怎样转换Image为canvas,以及canvas如何提取出一个Image,示例代码如下,有此需求的朋友可以参考下,希望对大家有所帮助
收藏 0 赞 0 分享

HTML5的语法变化介绍

HTML5的语法变化主要体现在标签不再区分大小写、元素可以省略结束标签、允许省略属性值的属性等等,感兴趣的朋友可以参考下,希望对大家了解html5有所帮助
收藏 0 赞 0 分享

HTML5 预加载让页面得以快速呈现

预加载是一种浏览器机制,使用浏览器空闲时间来预先下载/加载用户接下来很可能会浏览的页面/资源,当用户访问某个预加载的链接时,如果从缓存命中,页面就得以快速呈现
收藏 0 赞 0 分享

HTML5 input元素类型:email及url介绍

HTML5改进的地方想必大家有所知晓,下面我要介绍的是两个新的input元素类型email和url。让我们跟着代码来看看他们的好处,感兴趣的朋友可以参考下
收藏 0 赞 0 分享
查看更多