面向画布(Canvas)的JavaScript库
面向画布(Canvas)的JavaScript库
总结
每个库各有特色,根据需求选择
学习要点
面向画布(Canvas)的JavaScript库
- EaselJS 是一个封装了 HTML5 画布(Canvas) 元素的 JavaScript 库。
- jCanvaScript面向HTML5画布(canvas)的Javascript类库,它提供了许多方法用于简化处理HTML5画布(canvas)元素的内容,只要支持canvas和javascript的浏览器都可以使用它,包括iPhone、iPad和android等平台。
- Processing.js是一个开放的编程语言,在不使用Flash或Java小程序的前提下,可以实现程序图像、动画和互动的应用。Processing.js是轻量,易于了解掌握的理想工具,可用于可视化的数据,创建用户界面和开发基于Web的游戏。
- FABRIC.JS是一款简单而强大的JavaScript Canvas 库,提供了互动的对象模型,同时还包含 Canvas-to-SVG 解析器。
- oCanvas是一个JavaScript框架,用于简化HTML5 Canvas标签的使用,可以利用对象来代替像素。 oCanvas 可以帮助你很容易的在 HTML5 的 Canvas 标签上创建对象,并且创建这些对象的动画。
- jCanvas 就是一个 jQuery 的绘图插件,它封装了一些绘制图形的方法,只需编写几行代码即可生成图形。
- RGraph是一个使用HTML5 Canvas标签实现的图表制作Library。利用该Library生成的Chart具有可交互性,当鼠标点击或移过时会显示相应的信息,可以动态加载Chart或对特殊点进行缩放。
- Two.js 是面向现代 Web 浏览器的一个二维绘图 API。Two.js 可以用于多个场合:SVG,Canvas 和 WebGL,旨在使平面形状和动画的创建更方便,更简洁。
- ……
- 温馨提示:虽然使用各种框架(库)可以提供工作效率节省时间等诸多好处,但是还是建议将canvas的基础知识夯实掌握熟练然后再去学习使用这些框架,最后祝大家学习愉快,希望都能够创作出属于自己的优秀作品。
实例
<!DOCTYPE html><br/> <html lang="zh-cn"><br/> <head><br/> <meta charset="UTF-8"><br/> <title>8-23 课堂演示</title><br/> <script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script><br/> </head><br/> <body><br/> <canvas id="myCanvas" width="300" height="300" style="background: #A9A9A9"><br/> 很抱歉,您的浏览器暂不支持HTML5的canvas<br/> </canvas><br/> <img id="img1" src="" alt=""><br/> <script><br/> jc.start('myCanvas',true);<br/> jc.circle(150,120,50,'rgb(0,255,0)',true);<br/> jc.circle(100,120,50,'rgba(255,0,0,0.5)',true);<br/> jc.circle(125,140,50,'#0000ff',true).id('c1');<br/> jc('#c1').color('rgba(250,100,180,1)')<br/> jc.start('myCanvas');<br/> </script> </body><br/> </html>
网址
其中一个
转发申明:
本文转自互联网,由小站整理并发布,在于分享相关技术和知识。版权归原作者所有,如有侵权,请联系本站,将在24小时内删除。谢谢