面向画布(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>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>8-23 课堂演示</title>

     <script type="text/javascript" src="jCanvaScript.1.5.18.min.js"></script>

 </head>

 <body>

     <canvas id="myCanvas" width="300" height="300" style="background: #A9A9A9">

             很抱歉，您的浏览器暂不支持HTML5的canvas

     </canvas>

     <img id="img1" src="" alt="">

     <script>

             jc.start('myCanvas',true);

             jc.circle(150,120,50,'rgb(0,255,0)',true);

             jc.circle(100,120,50,'rgba(255,0,0,0.5)',true);

             jc.circle(125,140,50,'#0000ff',true).id('c1');

             jc('#c1').color('rgba(250,100,180,1)')

             jc.start('myCanvas');

     </script>

 </body>

 </html>

网址

其中一个

面向画布(Canvas)的JavaScript库的更多相关文章

  1. 10款面向HTML5 画布(Canvas)的JavaScript库

    https://www-evget-com/article/2014/4/9/20799.html

  2. 转:2014年最酷的30个JavaScript库

    原文来自于:http://www.gbtags.com/gb/share/3701.htm 使用JavaScript库将会使开发变的更简单,大部分JavaScript库提供的功能都是极好的,当我们在为 ...

  3. 用于展现图表的50种JavaScript库

    在很多项目中都会有在前端展现数据图表的需求,而在开发过程中,开发者往往会使用一些JavaScript库,从而更有效地达到想要的目标.最近,TechSlide上的一篇文章总结了50种用于展现图表的Jav ...

  4. 为新项目添彩的 10+ 超有用 JavaScript 库

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  5. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  6. 推荐15款制作 SVG 动画的 JavaScript 库

    在当今时代,SVG是最流行的和正在被众多的设计人员和开发人员使用,创建支持视网膜和响应式的网页设计.绘制SVG不是一个艰巨的任务,因为大量的 JavaScript 库可与 SVG 图像搭配使用.这些J ...

  7. 推荐8个实现 SVG 动画的 JavaScript 库

    SVG 是一种分辨率无关的图形(矢量图形).这意味着它在任何类型的屏幕都不会遭受任何质量损失.除此之外,你可以让 SVG 灵活现一些动画效果.这篇文章就给大家推荐8个实现 SVG 动画的 JavaSc ...

  8. 最新的jQuery插件和JavaScript库

    每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...

  9. HTML 5 画布(canvas)

    canvas 元素使用 JavaScript 在网页上绘制图像,本身是没有绘图能力. canvas 是一个矩形区域,可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的 ...

随机推荐

  1. 梦想CAD控件安卓选择集

    在本示例中将使用构造选择集对被过滤对象进行过滤,该类封装了选择集及其处理函数,支持如下过滤条件. 参数类型 类型 RTDXF0 TEXT 文字 MTEXT 多行文字 CIRCLE 圆 ARC 圆弧 L ...

  2. sql常用手法（二）

    drop,TRUNCATE和delete的区别 1.DROP删表,表结构将删了,当然数据也不存在了2.TRUNCATE和DELETE删数据,表结构还在3.DELETE可以带条件删除,TRUNCATE是 ...

  3. nginx配置X-Forwarded-For 防止伪造ip

    网上常见nginx配置ip请求头 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 风险: 用于可以通过自己设置请求头来伪造ip ...

  4. Day 14B 网络应用开发

    网络应用开发 发送电子邮件 在即时通信软件如此发达的今天,电子邮件仍然是互联网上使用最为广泛的应用之一,公司向应聘者发出录用通知.网站向用户发送一个激活账号的链接.银行向客户推广它们的理财产品等几乎都 ...

  5. 巩固JavaSE基础--IDEA完成实战项目

    PS:学习完JavaSE基础后,需要有一个项目来测试自己的学习成果,并加以巩固.所以在这里,就让我们来学习下“一本糊涂账”项目吧.(此项目来源于Java自学网站) 项目完成效果图一览

  6. mac os 10.10解决pod问题

    转一下 http://leancodingnow.com/how-to-get-cocoapods-work-on-yosemite/

  7. 使用JavaScript制作一个好看的轮播图

    目录 使用JavaScript制作出好看的轮播图效果 准备材料 1.图片若干张(包括轮播图和按钮的图片) 2.将按钮的图片应用到按钮上的CSS样式文件 3.实现轮播和点击跳转的JavaScript代码 ...

  8. UVA-1599 Ideal Path（双向BFS）

    题目: 给一个n个点m条边(2≤m≤100000, 1≤m≤200000)的无向图,每条边上都涂有一种颜色(用1到1000000000表示).求从结点1到结点n的一条路径, 使得经过的边数尽量少,在此 ...

  9. 洛谷 4246 BZOJ 1018 [SHOI2008]堵塞的交通

    [题解] 原来线段树还可以这么玩.. 我们用线段树维护连通性.对于一个矩形,我们用4个标记维护4个点的联通情况,再用两个标记维护右边两个点与它们右边的与它们在同一行的点的联通情况. 画图表示,就是 另 ...

  10. 在Eclipse中设置Maven插件

    [步骤] Maven插件的设置: ①installations:指定Maven核心程序的位置.不建议使用Maven插件自带的Maven程序,而应该使用我们自己解压的那个. ②user settings ...