面向画布(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. webstom2017最新破解 ------------ http://blog.csdn.net/voke_/article/details/76418116

    webstorm 作为最近最火的前端开发工具,也确实对得起那个价格,但是秉着勤俭节约的传统美德,我们肯定是能省则省啊. 方法一:(更新时间:2018/1/23)v3.3 注册时,在打开的License ...

  2. php redis使用 常用方法

    基本 $redis = new Redis();//创建对象 $redis->connect('127.0.0.1',6379);//建立连接 $redis->delete('test') ...

  3. jenkins自动部署测试环境

    构建脚本如下: echo "当前目录":$(pwd)echo "当前时间":$(date +%Y-%m-%d_%H:%M)find ./ -type f -na ...

  4. for循环，字典遍历（一）

    #items(): 返回字典中所有 key.value #keys(): 返回字典中所有 key 的列表 #values():返回字典中所有 value 的列表 my_dict = {'语文':89, ...

  5. org.springframework.data.repository.config.RepositoryConfigurationSource.getAttribute(Ljava/lang/String;)Ljava/util/Optional;

    升级springboot到2.0时,碰到了一大堆问题,上面异常原因是jar版本冲突了,有的模块忘记更新版本了,统一一下版本就可以了

  6. php第二十三节课

    XML XML:页面之间传递数据,跨平台传递 HTML:超文本标记语言,核心标签 XML特点:1.标签名可以自己定义2.有且只有一个根3.大小写敏感4.标签必须完整 <!DOCTYPE html ...

  7. <MySQL>入门二 增删改 DML

    -- DML语言 /* 数据操作的语言 插入:insert 修改:update 删除:delete */ 1.插入 -- 插入语句 /* 语法:insert into 表名(列名...) values ...

  8. 输入框点击下滑Ztree菜单

    记录一个功能实现代码,我这边前端用的是layui,需要实现的效果如下: 需求:当点击选择地区的时候会出现如上图的下拉菜单. 分析:首先肯定给这个输入框加监听,click方法,然后将ztree的div显 ...

  9. 每日命令：（3）pwd

    Linux中用 pwd 命令来查看”当前工作目录“的完整路径. 简单得说,每当你在终端进行操作时,你都会有一个当前工作目录. 在不太确定当前位置时,就会使用pwd来判定当前目录在文件系统内的确切位置. ...

  10. buf.readDoubleBE()

    buf.readDoubleBE(offset[, noAssert]) buf.readDoubleLE(offset[, noAssert]) offset {Number} 0 <= of ...