面向画布(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. Functional language 函数

    一.什么是函数式语言?       函数式语言一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分是原始函数.定义函数和函数型.这种语言具有较强的组织数据结构的能力,可以把某一数据 ...

  2. 【转载】jQuery.extend 函数详解

    转载自:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html jQuery.extend 函数详解 JQuery的e ...

  3. 02Struts2 环境搭建

    Struts2 环境搭建 1.下载 Apache Struts2 类库 2.建立web工程 3.配置web.xml <?xml version="1.0" encoding= ...

  4. layer iframe层弹出图片

    这个js是在一个layer iframe弹出层中,点击按钮弹出图片

  5. Java基础——接口

    一:接口,英文称作interface,在软件工程中,接口泛指供别人调用的方法或者函数. 在封装与接口中,private关键字封装了对象的内部成员.经过封装,产品隐藏了内部细节,只提供给用户接口(int ...

  6. php第二十九节课

    文件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...

  7. 散列(hash)

    散列(hash)是常用的算法思想之一,在很多程序中都会有意无意地使用到. 先来看一个简单的问题:给出N个正整数,再给出M个正整数,问这M个数中每个数分别是否在N个数中出现过. 例如N=5,M=3,N个 ...

  8. 类模板成员函数默认值问题：an out-of-line definition of a member of a class template cannot have default arguments

    template <typename T> class A { ); }; template<typename T> ) { /* */ } 对于类似上文代码,VS编译器会报 ...

  9. [USACO] 打井 Watering Hole

    题目描述 Farmer John has decided to bring water to his N (1 <= N <= 300) pastures which are conven ...

  10. springBoot启动及发布

    1.在项目编辑器(IDEA)中启动 运行springBoot项目Application类中main方法,这两个按钮都可以.如下图: 当然还有我们配置的启动按钮,这是最常用的启动方式,不再赘述,如下图: ...