面向画布(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. GEO/SRA数据库

    GEO数据库 GEO数据库隶属于NCBI,是最大最全面的基因表达数据库,主要是芯片和转录组测序数据.除储存数据外,也提供一些数据挖掘工具,因此利用好这个数据库,没有实验,没有自己的数据也能发好文章! ...

  2. Executors工厂类

    newCachedThreadPool 重用之前的线程 适合执行许多短期异步任务的程序. 调用 execute() 将重用以前构造的线程 如果没有可用的线程,则创建一个新线程并添加到池中 默认为60s ...

  3. 扒一扒PROMISE的原理，大家不要怕！

    在前端的日常工作中,回调函数(callback)应该是见怪不怪了,但是当回调函数遇上了异步(async),这就令人发指了.那么异步是什么意思呢,简单地说就是不等你执行完,就先执行下方的代码了. 举个

  4. TestNG多线程测试-注解方式实现

    用@Test(invocationCount = x,threadPoolSize = y)声明,invocationCount表示执行次数,threadPoolSize表示线程池大小. packag ...

  5. Python，socket编程

    TCP协议 IP+端口 应用层协议做的事不同,但都离不开数据的交换,本质上都是收和发~为什么要三次握手?目标机器可能不存在,握手期间,发送方也可能down掉.客户端————服务器,先发请求的那个是客户 ...

  6. Sturts2中Action的搜索顺序

    http://localhost:8080/ProjectName/path1/path2/path3/XX.action 首先会判断以/path1/paht2/path3为namespace的pac ...

  7. Effective C++ 一些记录和思考

    Effective C++ Iter 3 - 尽可能使用 const 一个反逻辑的 bitwise const class Text { ... char& operator[](std::s ...

  8. Java基础学习总结（88）——线程创建与终止、互斥、通信、本地变量

    线程创建与终止 线程创建 Thread类与 Runnable 接口的关系 public interface Runnable {         public abstract void run(); ...

  9. Docker学习总结（17）——学会使用Dockerfile

    Docker.Dockerfile.Docker镜像.容器这些都是什么鸟? 老生常谈,再再再--普及一下: Docker: 最早是dotCloud公司出品的一套容器管理工具,但后来Docker慢慢火起 ...

  10. Windows学习总结（10）——Windows系统中常用的CMD命令详解

    1.ping命令 ping是电脑网络故障诊断中的常用的命令,它的作用是用来检查网络是否通畅或者网络连接速度.我们来看一下PING命令的具体表述. 日常的诊断过程中我们最常用到的就是诊断连接是否通畅. ...