25多个资源,用于成功使用HTML5 Canvas

卡梅隆查普曼 经过 卡梅隆查普曼  |  2014年11月25日

如果你’在过去的几年里一直生活在岩石下,HTML5规范中的帆布元素相当易于理解。基本上,它 ’在页面中的矩形区域,您可以使用JavaScript来绘制您选择的任何内容。

它是,非常简单,是一种数字“canvas”您可以使用渲染游戏图形,图形,动画和其他可视图像。这基本上消除了对其他类型的在线动画和图形渲染(如Flash)的需要,并且在平台和设备上更兼容。

希望你已经知道了这一切。虽然画布背后的基本想法很简单,但实际上与之合作可能有点复杂。所以这里有一些很棒的资源让你开始!

 

学习帆布

如果你’对画布完全新建,您可能希望从这些方便的指南中启动。有数百个教程和指南在那里,但这三几乎一切都提供了初学者想要在入门前想要了解画布。

潜入HTML5.

潜入HTML5. 有一个很棒的章节,即与Canvas一起使用,包括基本定义,以及建立简单形状,画布坐标,路径,文本等信息的信息。

Mozilla开发人员网络

Mozilla开发人员网络 拥有一个非常彻底的画布指南,包括基础知识,绘图形状,使用图像,应用样式和颜色,转换,合成等。

HTML5 Canvas教程

HTML5 Canvas教程 究竟标题建议:使用画布的大量教程,用于从路径和曲线到图像,文本等内容从路径和曲线覆盖所有内容。

 

工具,框架和图书馆

画布可以用于整个宿主的不同目的,但应用程序和游戏是最常见的。特别是游戏是一种非常受欢迎的帆布使用,其中很多游戏发动机可用。

无论您想要与画布如何处理的内容,下面的工具和其他资源都将有助于您开始。

animatron.

animatron. 是一种用于创建HTML5动画的高级工具,无需编码。它具有简化的UI,支持自托管项目(因此您可以下载HTML5,JavaScript和资源文件进行总控制),具有实时协作工具,并支持公共和私人项目。

自由计划支持高达20个公共项目,而付费计划为您提供更多项目和其他功能,仅需6美元/月。

animatron.

mix

mix 是一个动画工具’S纯粹基于CSS3,HTML5和JavaScript。它有一个在线设计工具’易于使用,非常直观。它创建的动画是支持IE,Firefox,Chrome,Opera和Safari以及移动浏览器的支持。

mix完全可以使用。

mix

Radi.

Radi. 允许您创建视频,动画和实时图形,而无需学习代码。它适用于画布和视频标签,并支持多种内容层,包括图像,电影,形状,文本等。当然它支持互动元素。您可以免费下载Radi Beta。

Radi.

Playcanvas.

Playcanvas. 是一个易于使用的WebGL游戏引擎’自由和开源。它包括物理引擎(用于支撑刚体,触发器,车辆和接头),图形引擎(支持每个像素照明,阴影和后效应)等等。 PlayCanvas还包括协作开发工具,甚至包括免费托管游戏。

Playcanvas.

建议2

建议2 是专为2D游戏设计的游戏引擎。它’对于从休闲爱好者的每个人到想要创造更快的原型和模型的专业开发人员,甚至节省了编码的生产。它包括对灵活性行为,即时预览,强大的事件系统,轻松扩展性的支持。当然,您的游戏可以出口到各种平台。您可以下载具有有限功能的免费版本(完美用于尝试),或从低于130美元开始购买许可证。

建议2

Easeljs.

Easeljs. 是一个JavaScript库,使得更容易使用Canvas元素。它的API对Flash开发人员熟悉,但具有JavaScript敏感性。它包括对象嵌套,鼠标交互模型等。有演示可以让您从拖放到雪纺床单到过滤器和向量掩模的所有内容。

Easeljs.

拍摄者

拍摄者 是一个快速和自由的开源框架,支持JavaScript和CypeScript。它使用WebGL和画布,并支持动画,粒子,摄像机,设备缩放,Tilemaps等。

拍摄者

是一个JavaScript库,可以轻松使用WebGL更容易。它显着简化了您的代码,并且非常彻底记录。有很多很好的例子’S在实践中使用,包括类似于霍比特电影的网站等。

三家

Turbulenz.

Turbulenz. 是一个可以使用的HTML5游戏引擎来创建,测试,甚至货币化游戏。 turbulenz由两部分组成:发动机和SDK。该发动机支持渲染效果和粒子,物理引擎(包括碰撞和动画支持),场景和资源管理等。 SDK包括示例,文档,查看器,资产处理工具和打包和部署资源。

Turbulenz..

梅隆林

梅隆林 集成了瓷砖地图格式,使设计级别更快,更简化。它被设计为一个简单,免费的独立图书馆,用于开发与所有主要浏览器兼容的2D游戏。它使用基于多边形的碰撞算法和使用空间划分的广泛碰撞检测。它还包括吐温和转换效果,以及基本粒子和动画系统。

梅隆林

古天

古天 是一款易于使用的跨平台游戏引擎,可让您创建较少的代码。在其网站上的示例游戏使用左右80行代码来创建一个平台式的游戏’非常惊人。 Quintus完全记录,并有一个社区,以帮助您解决问题。

古天

狡猾

狡猾 让您使用Canvas或DOM呈现。它使用一个实体组件系统进行游戏开发,避免继承的长链。它还包括用于动画,效果,声音,输入等的大量的本机组件。它具有先进的SAT碰撞检测,它’兼容的跨浏览器,它支持Sprite地图,以便更容易地绘制游戏实体。

狡猾

莱姆琴

莱姆琴 是一个HTML5游戏框架,用于为现代设备构建纯粹的游戏。它’凭借良好的文件,有一个社区进一步支持。它包括用于布局,节点,形状和填充,事件,动画等功能的函数。

莱姆琴

kineticjs.

kineticjs. 是构建动画,转换,节点嵌套,分层,过滤,事件处理等的高性能框架,以及HTML5 Canvas和JavaScript for Mobile和桌面应用程序。它’已良好地记录,并且已经有很多示例已有。

kineticjs.

Bhive

Bhive 是一个帆布框架,可以轻松创建丰富的动画,游戏,应用程序和用户体验。它包括对绘图,动画和交互的支持,演示和示例以及文档。

Bhive

paper.js.

paper.js. 是在画布顶部运行的矢量图形脚本框架。它具有功能强大的功能,可以使用向量图形和Bezier曲线,所有功能都在一致,清洁的编程界面中包装。它’S很大程度上与Scriptographer(Adobe Illustrator的脚本环境)兼容。它’如果你很容易学习’重新初学者,同时也具有更多的高级用户的许多功能。

PaperJs.

Fabric.js.

Fabric.js. 是一个简单但功能强大的JavaScript HTML5 Canvas库,可在Canvas元素的顶部提供交互式对象模型。它甚至包括SVG-to-Canvas(反之亦然)解析器。您可以在画布上创建和填充对象,包括图像,复杂的形状,文本等。

Fabric.js..

voxel.js.

voxel.js. 是一个开源3D游戏构建工具包。它使得更容易创建像浏览器中的MINECRAFT等体素游戏。它’s分为多个组件,因此您可以使用您所需要的而不是巨大臃肿的游戏框架。

voxel.js.

游戏{closure} devkit

游戏{closure} devkit 使母语速度更容易和更快地建立游戏。它’S 100%JavaScript,具有战斗测试代码’S一直在全球部署。它可以与您当前最喜欢的文本编辑器和浏览器一起使用,而无需其他专门的工具或下载。由于它使用OpenGL用于移动游戏,因此在Android和iOS上具有本机速度。

gameClosure.

等源性游戏发动机

等源性游戏发动机 是一个高级HTML5多人游戏引擎’S由许多大名称使用,包括BBC。它包括2D和等距支持,具有粒子发射器,补间和基于细胞的动画。与其他不同“multiplayer”刚刚投入网络库的游戏发动机,Isogenic具有比在那里的任何其他HTML5游戏引擎中更先进和实时的多人功能。

等源性游戏发动机

enchant.js.

enchant.js. 是一个简单的框架,用于使用HTML5和JavaScript构建游戏和应用程序。它’已使用超过1,000个游戏和应用程序,并具有广泛的支持文件。它’S面向对象,多平台和事件驱动,完成动画引擎,WebGL支持,内容库等。

enchant.js.

韦德游戏引擎

韦德游戏引擎 可以轻松为桌面和移动设备创建游戏,并建立良好的方式。 Wade有一个模块化的架构,因此您可以快速创建您需要的任何类型的游戏。它具有一个基本模块,可用于灵活性,用于需要它们的游戏的物理模块,RPG和策略游戏的等距模型等等。

韦德

lycheejs.

lycheejs. 是嵌入式,控制台,移动,服务器和桌面游戏的HTML5和本机OpenGL游戏引擎。它支持响应性布局,包括效果和TWEEN发动机,法学发动机,粒子引擎,精灵动画引擎,位图字体引擎等等。它还包括WebSockets技术用于多人游戏。

lycheejs.

热线图.js.

热线图.js. 是一个简单的库,用于使用HTML5 Canvas创建JavaScript Heatmaps。它’S Web上最先进的热映射可视化库,具有非常轻的占用占地面积(小于3KB Gzip),并提供高价支持。

热线图

Chart.js.

Chart.js. 允许您使用Canvas和JavaScript创建简单,清洁,接合的图表。它有六种图表类型’S依赖性,响应,模块化和交互式。

Chart.js..

结论

无论您对帆布的计划是什么,这里的资源都应该让您在路径上。 Canvas Libraries,Frameworks和Game引擎,构建游戏,应用程序和否则为您的网站添加动画或交互性。