前言
今天分享一个基于HTML5 Canvas的独立Javascript类库 - KineticJS，使用这个类库你可以轻松的进行图形和图片绘制和修改，执行动画效果，或者和图形图片进行互动。包括独立的移动、拉伸变形、旋转各个图形图片，添加各种事件监听。它的好处就是可以直接使用现有的Canvas API，同时提供了各种各样的相关js库，本身的性能非常好，提供性能测试。个人还是比较看好KineticJS！
官方网站：http://www.kineticjs.com/ 文档及DEMO：http://www.html5canvastutorials.com/
KineticJS原理
KineticJS应用需要HTML页中一个DOM元素作为容器包含一个生成Layer层得舞台。每一层都绑定自己的画布元素，可以包含组合或形状。形状是用户定义的绘图功能，开发人员可以添加事件监听器，如左右移动，旋转，拉伸变形等。组合可以包含形状和其他组合。由于引入了Layer的概念，可以使得用户在无限个层上进行绘图操作，彼此不受影响，从而获得较好的性能体验。
最新版本Current Version: v3.9.3 主要特点：
- 除了IE，支持所有现代浏览器
- 不依赖任何其他js类库
- API文档完整
- 绘图快，性能非常好
- 社区做的不错，有很多Demo和上传案例供研究
示例截图：
Source:HTML5 Canvas Javascript类库 - KineticJS推荐
作者：夜飞羽 时间：2012-04-20 来源：http://www.mxria.com
分享到：
相关推荐
html2canvas是一个JavaScript库，它的主要功能是允许在浏览器环境中将HTML元素转化为Canvas图像，进而可以进行保存或者进一步的图像处理。这个库在前端开发中广泛应用，特别是在需要将网页内容截图分享、屏幕快照或...
这个“前端项目-javascript-canvas-to-blob.zip”包含了一个示例项目，帮助开发者理解并应用这一功能。 该项目的核心在于`canvas.toBlob()`方法。这个方法接收一个回调函数作为参数，当转换完成时，会将生成的Blob...
JavaScript-Canvas-to-Blob-master 是一个开源项目，主要目的是为那些不支持HTML5 Canvas元素的`toBlob`方法的浏览器提供兼容性支持。这个库通过JavaScript实现了一个功能强大的工具，使得开发者能够在任何浏览器...
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvas-to-blob/3.6.0/canvas-to-blob.min.js"> ``` 4. 使用Canvas to Blob的`canvas.toBlob`方法将data URL转换为Blob对象。 ```javascript canvas.toBlob...
这会将JavaScript文件相对于当前目录安装在./node_modules/blueimp-canvas-to-blob/js/ ，您可以从中将它们复制到Web服务器提供的文件夹中。 接下来，在HTML标记中包含缩小JavaScript Canvas to Blob脚本： < ...
在这个“文字粒子效果html5-canvas-side-文字.rar”压缩包中，包含的项目是一个利用Canvas API创建的文字粒子效果示例。这种效果常用于网站背景、动态头像、艺术字展示等，可以给用户带来视觉上的冲击力和趣味性。 ...
KineticJS，作为一款基于HTML5 Canvas的JavaScript框架，为前端开发者提供了丰富的功能和高效的性能，是构建动态、交互式Web应用的理想工具。这个名为"前端项目-kineticjs.zip"的压缩包，包含了KineticJS的源代码和...
《开源的HTML5 Canvas画图插件 - Literally Canvas详解》 HTML5的Canvas元素为网页带来了强大的图形绘制能力，而Literally Canvas则是一个优秀的基于Canvas的开源画图插件，它提供了一套完整的画图工具，使得用户...
3. `canvas-basic-graphics.js`：这是核心的JavaScript文件，包含了实现各种图形绘制的函数。 接下来，我们逐一解析这些图形的绘制方法： 1. **初始化画布**：在`canvas-basic-graphics.js`中，首先需要获取`...
"html5-canvas-mouse-ink"这个项目显然与Canvas有关，特别是涉及到了鼠标交互和动画效果，这通常是用来创建某种动态视觉效果，比如跟随鼠标移动的墨迹效果。 在HTML5 Canvas中，`<canvas>`元素是核心，它是画布，而...
总的来说，"html5-canvas-3d-line-avatar.zip"是一个关于HTML5 Canvas 3D编程的实例，涵盖了图形学基础、JavaScript编程和3D渲染技术，对于提升Web前端开发技能非常有帮助。通过学习和实践这个项目，你可以掌握将3D...
总之，"html5-canvas-3d-earth-rotate.zip"项目展示了HTML5 Canvas在3D图形方面的应用，通过JavaScript实现了3D地球的动态旋转效果，这不仅涉及到基本的Canvas绘图，还包括3D图形理论和动画技术。对于想要提升Web...
在"html5-canvas-border-pixel-progressbar"这个项目中，关键在于利用Canvas的`strokeStyle`属性来设置边框颜色，并使用`beginPath()`、`moveTo()`、`lineTo()`、`stroke()`等方法来绘制边框。这些方法配合起来可以...
在这个"html5-canvas-rabbit-run-games-code"项目中，我们关注的是一个基于Canvas技术开发的3D兔子跑酷游戏，该游戏既适用于手机，也适用于个人电脑，展示了HTML5 Canvas的强大功能和跨平台兼容性。 首先，HTML5 ...
"html5-canvas-web-图片涂鸦"这个主题涉及到的知识点主要集中在如何利用HTML5的Canvas API来实现图片的涂鸦功能。 1. **Canvas API基础** HTML5的Canvas是一个基于矢量图形的画布，通过JavaScript来控制。它提供了...
"html5-canvas-15-clock.zip"这个压缩包很可能包含了一个关于如何使用HTML5 Canvas实现数字时钟的示例项目。在这个项目中，我们将深入探讨HTML5 Canvas API以及如何利用它来构建一个实时更新的时间显示。 首先，...
这个"html5-canvas-520-love-cartoon-codes(jb51.net).rar"压缩包可能包含了一个使用HTML5 Canvas技术制作的520（我爱你）爱情卡通代码示例。520在中国网络文化中常被用来表达“我爱你”，因为它在中文发音中与...
总的来说，"html5-canvas-shine-loading"是一个展示HTML5 Canvas动态效果的实例，它利用了Canvas的绘图能力以及JavaScript的动画框架，为用户呈现了一个有趣且引人入胜的加载过程。这样的加载页不仅可以提升用户体验...
jsMind 是一个显示/编辑思维导图的纯 javascript 类库，其基于 html5 canvas (和 svg) 进行设计。jsMind 以 BSD 协议开源，在此基础上你可以在你的项目上任意使用。 jsMind is mind map library built by ...
- `html5-canvas-china-map.rar`：这是一个使用HTML5 Canvas绘制中国地图的例子，展示了Canvas API如何用于地理数据可视化。Canvas允许开发者在网页上进行动态图形绘制，通过JavaScript控制图形的绘制、擦除和更新...