HTML5 Canvas JavaScript库 Fabric.js 使用经验
首先,表明我的态度:采用 Flash 才是最优方案,不建议使用 HTML 5 的 Canvas 做一些生产/工业级的网页应用。
Flash的优势一是浏览器支持好,二是代码成熟稳定。而HTML5 的 Canvas 不利用网络上开源的 JS 绘图库,你是不可能做出复制的 Canvas 应用的。而网络中的 JS 绘图库目前杂且乱,部分库没更新几个月项目就被废弃了,现在还没有像 JQuery 之于 JS一样那么流行的 Canvas 绘图库。我看好的就是 Createjs 和 Fabric.js。 其中 Creatjs 包括 3 个 JS库(easeljs,tweenjs,soundjs),各司其职,分别用于Canvas 元素操作、动画特效、声音控制。Fabric.js 则是在矢量图方便特别好用,还有图元的放大、缩小、旋转之类好用。
Frabic.js 在实际使用中发现个明显缺点:定时器不好用,对于做动画特效来说,这很不方便。
Createjs 我只做过Demo,不过定时器设计的很好。翻阅很多论坛,评论说 它的 API 设计很像 Flash 的 ActionScript ,所以对于以前使用 Flash 开发的人来说,它很适合。由于我不会 AS ,感觉不到这点。
后面会有我使用 Fabric.js 做的一些很浅陋的应用。
PS: CreateJS 目前已经有 Adobe 之类的大厂商赞助,并且目前可以用CC导出,看来会成为下一波流行(Canvas JS库)的主流。
HTML5 Canvas JavaScript库 Fabric.js 使用经验的更多相关文章
- Canvas实用库Fabric.js使用手册
简介什么是Fabric.js? Fabric.js是一个可以简化Canvas程序编写的库. Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工 ...
- 超酷HTML5 Canvas图表应用Chart.js自定义提示折线图
超酷HTML5 Canvas图表应用Chart.js自定义提示折线图 效果预览 实例代码 <div class="htmleaf-container"> <div ...
- 高性能动画!HTML5 Canvas JavaScript框架KineticJS
高性能动画!HTML5 Canvas JavaScript框架KineticJS KineticJS是一款开源的HTML5 Canvas JavaScript框架,能为桌面和移动应用提供高性能动画,并 ...
- Chart.js – 效果精美的 HTML5 Canvas 图表库
Chart.js 是一个令人印象深刻的 JavaScript 图表库,建立在 HTML5 Canvas 基础上.目前,它支持6种图表类型(折线图,条形图,雷达图,饼图,柱状图和极地区域区).而且,这是 ...
- 基于html5 Canvas图表库 : ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
- 自己写的HTML5 Canvas + Javascript五子棋
看到一些曾经只会灌水的网友,在学习了前端之后,已经能写出下载量几千几万的脚本.样式,帮助大众,成为受欢迎的人,感觉满羡慕的.我也想学会前端技术,变得受欢迎呀.于是心血来潮,开始学习前端知识,并写下了这 ...
- 二维码生成:使用 JavaScript 库QRCode.js生成二维码
QRCode.js:跨浏览器的javascript二维码生成库,支持html5的Canvas画布,没有任何依赖. Github 地址:https://github.com/davidshimjs/qr ...
- 【JavaScript游戏开发】使用HTML5+Canvas+JavaScript 封装的一个超级马里奥游戏(包含源码)
这个游戏基本上是建立在JavaScript模块化的开发基础上进行封装的,对游戏里面需要使用到的游戏场景进行了封装,分别实现了Game,Sprite,enemy,player, base,Animati ...
- 二维码解析:使用 JavaScript 库reqrcode.js解析二维码
上次使用QRCode.js可以来生成二维码,但是我没有找到有文档说明可以对存在的二维码进行扫描解析其中的内容. 幸亏查找到了可行的解决方案,而且很好使哦!就是reqrcode.js 地址:https: ...
随机推荐
- Javascript 汉字转拼音
调用方式: var pinyin = convert("欢迎光临"); alert(pinyin); 新建JS文件:PYConvert.js,内容如下: var PinYin = ...
- JMeter对Selenium自动化代码进行压测
原文转载:http://www.blogjava.net/qileilove/archive/2014/06/05/414423.html 准备工作: 将文件selenium-server-stand ...
- hibernate 其中七种关联关系
写的很好 http://blog.csdn.net/qq_27550755/article/details/50070017
- mac管理员密码破解
方法一:官方解决方法.找出电脑原配的系统盘,找不到就借一张或者刻录一张,重启电脑,启动的时候按C键,选好语言后进入安装的时候,点击“常用工具”,里面有一项是“重设密码”,这时就可以重新设定Mac OS ...
- 图像载入 imread()[OpenCV 笔记4]
Mat imread( ); filename 载入的图像名: flags 指定加载图像的颜色类型,默认载入三通道彩色图像, 如果取枚举类型 (OpenCV3中暂时失效),则定义如下 enum{ CV ...
- Exercise DS
#include <iostream> using namespace std; typedef struct Node { Node *next; int data; }Node, *L ...
- struts-json
Struts2序列化的属性,该属性在action中必须有对应的getter方法 如果action的属性很多,我们想要从Action返回到调用页面的数据.这个时候配置includeProperties或 ...
- JavaScript学习总结【9】、DOM Ready
1.DOM DOM(Document Object Model)即文档对象模型,是从文档中抽象出来的,DOM 操作的对象就是文档,DOM 将 HTML 文档呈现为带有元素.属性和文本的树结构,即节点树 ...
- quick-x 计时器的写法
local scheduler = require("framework.scheduler") --计时器 function MainScene:recoderTime() pr ...
- Python 基础-python环境变量、模块初识及字符类型
(1).模块内置模块.第三方模块.自定义模块初识模块:sys \ os一般标准库存放路径 C:\Users\Administrator\AppData\Local\Programs\Python\Py ...