Flash创建和发布HTML5 Canvas文档_翼狐网
Flash热门视频教程
共有205818人学习了该教程
共有194430人学习了该教程
共有136436人学习了该教程
共有55072人学习了该教程
共有37173人学习了该教程
共有36947人学习了该教程
提供最专业、体验最好的在线教育培训服务，让学设计的你享受最权威与最便利的学习环境！
微信号：yihuwang2012
HTML5 Canvas 是什么？ & & & & & & & & & Canvas 是 HTML5 中的一个新元素，它提供了多个 API，可以让您动态生成及渲染图形、图表、图像及动画。HTML5 的 Canvas API 提供二维绘制能力，它的出现使得 HTML5 平台更为强大。如今的大多数操作系统和浏览器都支持这些功能。Canvas 本质上是一个位图渲染引擎，其最终结果是生成绘图，且绘图大小不可调整。另外，在 Canvas 上绘制的对象并不属于网页 DOM 的一部分。在网页中，您可以使用 &Canvas& 标签添加 Canvas 元素。然后便可以使用 JavaScript 来增强这些元素以便构建交互性。新文档类型 HTML5 Canvas & & & & & & & & Flash Professional CC 允许您创建具有图稿、图形及动画等丰富内容的 HTML5 Canvas 文档。Flash Pro 中新增了一种文档类型 HTML5 Canvas，它对创建丰富的交互性 HTML5 内容提供本地支持。这意味着您可以使用传统的 Flash Professional 时间轴、工作区及工具来创建内容，而生成的是 HTML 输出。您只需单击几次鼠标，即可创建 HTML5 Canvas 文档并生成功能完善的输出。粗略地讲，在 Flash Pro 中，文档和发布选项会经过预设以便生成 HTML5 输出。Flash Professional CC 集成了 CreateJS，后者支持通过 HTML5 开放的 Web 技术创建丰富的交互性内容。Flash Pro CC 可以为舞台上创建的内容（包括位图、矢量、形状、声音、补间等等）生成 HTML 和 JavaScript。其输出可以在支持 HTML5 Canvas 的任何设备或浏览器上运行。Flash Professional 和 Canvas API & & & & & & & & &Flash Pro 利用 Canvas API 发布到 HTML5。它可以将舞台上创建的对象无缝地转换成 Canvas 的对应项。Flash Pro 提供 Flash 功能与 Canvas 中 API 的一一对应，从而允许您将复杂的内容发布到 HTML5。创建 HTML5 Canvas 文档 & & & & & & & & & 要创建 HTML5 Canvas 文档，可执行以下操作：现在便可以使用 Flash Pro 中的工具开始 HTML5 内容的创建了。初始使用 HTML5 Canvas 文档时，您会注意到某些功能和工具是不支持和禁用的。这是因为 Flash Professional 支持那些反之也受 HTML5 中的 Canvas 元素支持的功能。例如，不支持 3D 转换、虚线、斜角效果。启动 Flash Professional CC。在欢迎屏幕上，单击“HTML5 Canvas”选项。这会打开一个新的 FLA，其“发布设置”已经过修改，以便能够生成 HTML5 输出。也可以选择“文件”&“新建”来显示“新建文档”对话框。单击“HTML5 Canvas”选项。在 HTML5 Canvas 文档中添加交互性 & & & & & & & & & Flash Professional CC 使用 CreateJS 库发布 HTML5 内容。CreateJS 是一个模块化的库和工具套件，它支持通过 HTML5 开放的 Web 技术创建丰富的交互性内容。CreateJS 套件包括：EaselJS、TweenJS、SoundJS、PreloadJS 及 Zo。CreateJS 可分别使用这些库将舞台上创建的内容转换为 HTML5，从而生成 HTML 和 JavaScript 输出文件。您还可以对这个 JavaScript 文件进行操作来增强内容的表现力。不过，您可以为舞台上针对 HTML5 Canvas 创建的对象添加交互性，在 Flash Professional CC 中即可实现。这意味着，您实际上在 Flash Pro 中，就可以为舞台上的各个对象添加 JavaScript 代码，并在编写期间进行预览。反过来，Flash Pro 通过代码编辑器中的有用功能对 JavaScript 提供本地支持，从而帮助提高编程人员的工作流效率。您可以选择时间轴上的各个帧和关键帧来为内容添加交互性。对于 HTML5 Canvas 文档，可以使用 JavaScript 添加交互性。有关编写 JavaScript 代码的详细信息，请参阅此链接。可以直接在动作面板中编写 JavaScript 代码，编写时 JavaScript 代码支持以下功能：代码提示允许您快速插入和编辑 JavaScript 代码而不会发生错误。在动作面板中键入字符时，您会看到一个可能完成输入的候选项列表。此外，在使用 HTML5 Canvas 时，Flash Professional 还支持动作面板的一些固有功能。在为舞台上的对象添加交互性时，这些功能有助于提高工作流效率。它们是：语法加亮显示按照语法以不同的字体或颜色显示代码。此功能使您可以采用结构化方式编写代码，从而帮助您清楚地区分正确代码和语法错误。代码着色按照语法以不同颜色显示代码。使您可以清楚区分语法的各个部分。加括号编写 JavaScript 代码时自动添加右方括号和圆括号以对应左括号。(A) 语法加亮显示 (B) 代码着色 (C) 加括号您可以使用 JavaScript 为舞台上的形状或对象添加交互性。您可以为单独的帧和关键帧添加 JavaScript。选择要对其添加 JavaScript 的帧。选择“窗口”&“动作”以打开动作面板。使用 JavaScript 代码片段 & & & & & & & & & 您可以使用 Flash Professional CC 中可用的 JavaScript 代码片段来添加交互性。要访问并使用代码片段，请选择“窗口”&“代码片段”。有关添加 JavaScript 代码片段的详细信息，请参阅此文章。CreateJS 文档参考 & & & & & & &CreateJS 库API 文档Github 上的代码示例EaselJS/Docs/EaselJS/modules/EaselJS.html/createjs/easeljs/TweenJS/Docs/TweenJS/modules/TweenJS.html/createjs/tweenjs/SoundJS/Docs/SoundJS/modules/SoundJS.html/createjs/soundjs/PreloadJS/Docs/PreloadJS/modules/PreloadJS.html/createjs/preloadjs/将动画发布到 HTML5 & & & & & & & & & 要将舞台上的内容发布到 HTML5，可执行以下操作：选择“文件”&“发布设置”。在“发布设置”对话框中，指定以下设置：输出将 FLA 发布到此目录。默认为 FLA 所在的目录，但可通过单击浏览按钮“...”进行更改。循环时间轴如果选中，则时间轴循环；如果未选中，则在播放到结尾时时间轴停止。发布 HTML如果未选中，则不生成 HTML 文件。资源路径相对 URL，将图像、声音及支持的 CreateJS JavaScript 库导出到此处。如果未选中右侧的复选框，则不会从 FLA 导出那些资源，但仍会使用指定路径作为其 URL。这会加快从具有许多媒体资源的 FLA 发布的过程，因为不会覆盖修改过的 JavaScript 库。JAVASCRIPT 命名空间元件、图像和 CreateJS 库被放入和从中引用的命名空间。托管的库如果选中，将使用在 CreateJS CDN () 上托管的库的副本。这样允许对库进行缓存并在各个站点之间实现共享。包括隐藏图层如果未选中，则不会将隐藏涂层包含在输出中。压缩形状如果选中，将以精简格式输出矢量说明。如果未选中，则导出可读的详细说明（用于学习目的）。多帧边界如果选中，则时间轴元件包括一个 frameBounds 属性，该属性包含一个对应于时间轴中每个帧的边界的 Rectangle 数组。多帧边界会大幅增加发布时间。单击“发布”，将内容发布到指定位置。注意: & & & & & 使用嵌套时间轴设计的具有单个帧的动画是不能循环播放的。了解 HTML5 Canvas 输出 & & & & & & & & & 发布的 HTML5 输出包含以下文件：HTML 文件包含 Canvas 元素中所有形状、对象及图稿的定义。在将 Flash 转换为包含交互元素的 HTML5 和相应的 JavaScript 文件时，它也调用 CreateJS 命名空间。JavaScript 文件包含动画所有交互元素的专用定义和代码。在 JavaScript 文件中还定义了所有补间类型的代码。这些文件默认会被复制到 FLA 所在的位置。可通过在“发布设置”对话框（“文件”&“发布设置”）中提供输出路径来更改此位置。将现有内容移植到 HTML5 Canvas & & & & & & & & &生成 HTML5 输出时，可以移植 Flash Pro 中现有的内容。粗略地讲, Flash Pro 允许您通过手动复制或导入单独的图层、元件及其他库项目来移植内容。您也可以运行“将 AS3 转换为 HTML5 Canvas 文档”命令，将现有 ActionScript 内容自动导出到一个新的 HTML5 Canvas 文档。有关更多信息，请参阅此链接。不过，在 Flash Professional CC 中使用 HTML5 文档类型时，您会注意到某些 Flash 功能是不支持的。这是因为 Flash 中的这些功能在 Canvas API 中没有对应的功能。因此，这些功能不能用于 HTML5 Canvas 文档类型。当您想执行以下操作时，这可能会影响您的内容移植：复制将内容（图层或库元件）从传统 Flash 文档类型（如 ActionScript 3.0、AIR for Android、AIR for Desktop 等）复制到 HTML5 文档中。这种情况下，将删除不支持的内容类型或将其转换为支持的默认类型。 例如，复制 3D 动画时，将删除对舞台上的对象应用的所有 3D 转换。导入导入包含不支持内容的 PSD 或 AI 文件。这种情况下，将删除内容或将其转换为支持的默认类型。例如，导入应用了渐变斜面角效果的 PSD 文件时，Flash Pro 将删除该效果。同时处理同时处理多个文档类型（如 ActionScript 3.0 和 HTML5 Canvas）时，使用选定的不予支持的工具或选项来切换文档。这种情况下，Flash Pro CC 将显示信息，指示不支持该功能。 例如，您曾经在 ActionScript 3.0 文档中创建了一条虚线，现在想在线条工具仍处于选中状态下切换为 HTML5 Canvas。观察鼠标指针和属性检查器，它们会显示相应的图标，指示在 HTML5 Canvas 中不支持这条虚线。脚本将删除 ActionScript 组件并注释掉代码。另外，如果在注释块中编写了 JavaScript（Toolkit for CreateJS 用于 Flash Professional CC 13.0），应确保将代码手动取消注释。例如，当复制包含按钮的图层时，将删除这些按钮。移植之后对内容应用的更改 & & & & & & & & &以下是将原来的内容移植到 HTML5 Canvas 文档时，应用了更改的类型。将内容删除HTML5 Canvas 不支持的内容类型会予以删除。例如：删除 3D 转换注释掉 ActionScript 代码删除视频将内容修改为支持的默认值支持内容类型或功能，但不支持功能的属性。例如：不支持叠加混合模式，将改为标准模式。不支持虚线，将改为实线。有关移植期间不支持的功能及其回退值的完整列表，请参阅此文章。使用 JSFL 脚本将 ActionScript 3 转换为 HTML5 Canvas 文档 & & & & & & & & &Flash Professional CC 提供一个 JSFL 脚本，用于将 AS3 文档转换为 HTML5 Canvas 文档。运行时，JSFL 脚本执行以下操作：创建一个新的 HTML5 Canvas 文档。将所有的图层、元件和库项目复制到这个新的 HTML5 Canvas 文档。对不支持的功能、子功能或功能属性应用默认值。为每个场景分别创建一个 FLA 文件，这是因为 HTML5 Canvas 文档不支持多个场景。要将 AS3 文档转换为 HTML5 Canvas 文档，可执行以下操作：在 Flash Professional CC 中打开 ActionScript 3 文档。选择“命令”&“将 AS3 转换为 HTML5 Canvas 文档”。注意: & & & & & 请确保阅读完输出面板中的警告信息。这些警告会让您了解在转换期间对内容应用了哪些更改。在 HTML5 Canvas 中转换与重复使用 ActionScript 资源 & & & & & & & & & & 作者：Suhas Yogin & & & & & & & & & & & & & &
& & & & & & &
最多浏览的Flash教程
行业教程引导：
软件教程引导：createjs是一个轻量级的框架，稍微有点时间和耐心，就可以把全部源代码都看一遍，毕竟只有三十几个js文件。地址：/
开发createjs的动画或游戏，没有重型的IDE或什么工具支持，我们只能从零开始写js。一方面，这样对于jser来说，足够灵活；另外一方面，createjs因此足够精简足够小。
createjs由几个库组成：
l easeljs，这个是核心，包括了显示列表、事件机制；
l preloadjs，用于预加载图片等；
l tweenjs，用于控制元件的缓动；
l soundjs，用于播放声音。
easeljs 81k，preloadjs 31k，soundjs 34k，tweenjs 18k，对于手机小动画或小游戏，其实只需要加载easeljs即可，因为核心库已经涵盖了简单图片的预加载功能。
开发步骤：
1、 下载类库，可以使用源代码，也可以使用压缩过的min.js，就好像平时写网页一样。
2、 建立html和canvas标签，onload后再执行createjs相关逻辑。
3、 编写createjs逻辑。这个非常简单，因为createjs只提供了最简单的基础功能，我们理解了基础功能后就可以叠积木了。
关于createjs，最关键是要理解类结构
上图列出了createjs的主要类结构，所有舞台上的内容都是元件，元件的基类是DisplayObject。Container可以包含子元件，舞台Stage本身也是Container。另外Sprite用于表现SpriteSheet帧动画人物、Bitmap用于展示纯静态的人物。
而Filter和Shadow则是滤镜分支，可以针对任意元件实现颜色变换、模糊、阴影等效果。使用滤镜的方式跟Flash一致，需要新建Filter实例，添加到目标元件的FilterList中，Createjs框架在下一帧就会把该元件加上滤镜效果。
下边以一个例子概要学习一下Createjs的使用：
&script type="text/javascript"&
function init() {
var canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
stage.autoClear = true;
//添加背景图
= new createjs.Bitmap("../res/bg.jpg");
stage.addChild(bg);
//增加5个小人，不断做旋转和放缩
for (var i = 0; i & 5; i++) {
var man = new createjs.Bitmap("../res/grossini.png");
man.regX = 42;
man.regY = 60;
man.x = canvas.width/6*(i+1);
man.y = canvas.height/5*4;
man.scaleX = man.scaleY = 1;
stage.addChild(man);
createjs.Tween.get(man, {loop: true}, true)
.to({rotation: 360, scaleX:2, scaleY:2}, 1000).to({rotation: 360, scaleX:1, scaleY:1}, 1000);
man.addEventListener("click", function(event) {
console.log("click", event.currentTarget);
}); //监听点击非常方便，位图的透明区域忽略鼠标事件
var images = [];
for (var i = 1; i &= 14; i++) {
images.push("../res/grossini_dance_" + (i&10?("0"+i):i) + ".png");
//增加5个帧动画小人，不断播放14帧画面
for (var j = 0; j & 5; j++) {
var sheet = new createjs.SpriteSheet({
images: images,
frames: {width: 85, height: 121, regX: 42, regY: 60}
}); //需要设置每帧的宽高，注册点信息
var man = new createjs.Sprite(sheet);
man.framerate = 60/7;
man.x = canvas.width/6*(j+1);
man.y = canvas.height / 3;
man.play();
stage.addChild(man);
stage.update();
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick", tick);
//这里有点猥琐，需要用户自行控制舞台不断update更新
function tick(event) {
stage.update(event);
阅读(...) 评论()出处：http://blog.csdn.net
本文主要选取了Construct2、ImactJS、LimeJS、GameMaker、CreateJS、lycheeJS、Crafty、three.js、melonJS、Turbulenz、Quintus、Cocos2d-html5等进行了简要介绍和对比，主要是根据网上的资料整理而成。
主流框架对比
Construct2
Construct 2是一个运行于Windows平台的游戏制作工具，它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台（Windows、Mac、Linux、Android、iOS等）的游戏。免费版可以将游戏导出成HTML5。收费版本分为个人版（79英镑）和企业版（259英镑），可以导出所有平台的版本，同时提供了更多的特效和音乐。如果使用该工具盈利超过5000美元，需要升级到企业版。
1. 简单易用，可实时运行游戏
2. 强大的事件系统，可以不通过写代码来控制游戏逻辑
3. 提供了可编程扩展的接口
4. 提供了大量特效，支持物理效果
5. 支持所有平台
6. 完整的文档以及社区支持
不如直接写代码灵活
参考资料：
ImpactJS是一个基于JavaScript的HTML5游戏引擎，同时支持PC和移动平台浏览器。它是目前除了Construct2之外最受欢迎的HTML5游戏引擎，使用需要支付99美元。
1. 提供了灵活的关卡编辑器，可以快速构建游戏地图
2. 提供了强大的调试工具
3. 提供了Ejecta可以将JavaScript的执行结果通过OpenGL渲染出来，可以在iOS平台上获得与原生应用相近的效率
4. 文档齐全，有两本专门介绍ImpactJS开发的书
5. 支持物理效果
6. 支持自己编写插件来扩展
App Store游戏
LimeJS是一个基于Google Closure Library开发的HTML5游戏框架，继承了Closure代码易读易懂、架构清楚的特性。同时提供了游戏中各种通用实体的封装，如Director、Scene、Layer、Event和Animation等，与Cocos2d的API类似。它是由
公司创建。
1. 基于Apache协议的开源框架
2. 功能强大，文档齐全，与ImactJS类似
3. 支持物理效果
4. 与Cocos2d的API类似，容易上手
依赖于Google Closure
GameMaker与Construct 2类似，都是一个游戏制作工具，可以导出到各个平台运行，分为免费版、标准版（49.99美元）、专业版（99.99美元）和大师版（799.99美元）。其中免费版只能导出Mac和Windows版本，导出HTML5需要大师版或者专业版（再额外支付99.99美元）。
优点和缺点：
优势与Construct2类似，但性价比不如Construct2高
CreateJS(EaselJS)
CreateJS是Adobe官方赞助的开源开发框架，它大部分API都是基于Flash原有的API来模仿实现的，并且官方提供了直接把Flash动画转成JS数据包的工具，调用起来很方便。CreateJS提供了若干开发套件及工具，分别是：EaselJS（负责图形、事件、触控、滤镜等功能）、TweenJS（补间动画）、SoundJS（音频控制）、PreloadJS（文件加载）和Zo?（生成图片精灵及动画数据）。
1. Flash开发者很容易上手
2. 提供了Flash转html5的工具，可以将部分Flash代码进行转换再修改
3. 基于MIT协议的开源框架
4. 类库设计非常独立，包含不同的模块，可选择性使用
lycheeJS是一个环境独立的JavaScript游戏引擎，可以在任何支持JavaScript的环境中运行。它的理念是做最快的JavaScript游戏引擎。
1. 同时支持PC（Firefox、Chrome、Opera、Safari、IE）和移动平台（WebKit、Chrome、Firefox、Safari）的浏览器
2. 提供了CDN、WebSockets、SPDY、HTTP2.0以及游戏截图的支持
3. 提供了可以直接导出第三方（Facebook、AppStore、Google Play Store）资源包来发布
4. 基于MIT协议的开源框架
Crafty是一个体积小、简单、轻量级的2D的HTML5游戏引擎，它提供了通过Canvas或DOM来绘制实体，提供了精灵Map以及SAT高级碰撞监测支持。它是由个人（Louis Stowasser）创建，同时由Github上的一些开发者共同开发。
2. 轻量级引擎，不会受到框架的太多束缚
3. 同时支持PC和移动平台浏览器
Three.js是一个轻量级的JavaScript库，用于在浏览器上创建和显示3D图形。它可以同时使用Canvas、SVG或WebGL进行绘制。
优点和缺点：
支持3D，但是不适合做2D游戏
melonJS是melonJS团队对Javascript热情以及开发经验的结晶，是一个简单、免费、而且独立的类库。
1. 轻量级的2D引擎
2. 支持所有主流的PC和移动平台浏览器
3. 支持使用Tiled map editor来创建和编辑地图
4. 支持多声道音频
5. 基于MIT协议的开源框架
Turbulenz是一个开源的HTML5游戏引擎，提供了可以运行在Windows、MacOS、Linux上的SDK，允许开发人员创建高质量和硬件加速的2D、3D游戏。包括以下功能：异步资源加载、进行特效和粒子渲染、支持物理效果、碰撞检测以及动画、3D音效支持、支持网络交互以及社交网络分享、场景和资源的管理。
1. 功能强大，同时支持2D和3D
2. 基于MIT协议的开源引擎
Quintus是一个容易上手、轻量级、且模块化的HTML5游戏引擎。它引用面向对象的思想来进行HTML5游戏开发，同时依赖于jQuery来提供事件处理机制和元素选取操作。
1. 依赖于jQuery
2. 目前引擎仍处于初级阶段，还很不成熟
Cocos2d-html5
Cocos2d-html5是一款基于Cocos2d-x API的2D开源免费HTML5游戏引擎。它目前通过canvas进行渲染，将来会支持WebGL。它由国内Cocos2d-x核心团队主导开发和维护，行业领袖、HTML5大力推动者Google为这个项目提供支持。同时，Zynga、Google等大公司的工程师也参与到它的设计工作中。
1. 与Cocos2d的API类似，容易上手
2. 中文文档齐全，资料丰富
3. 基于MIT协议的开源引擎
各框架具体参数对比
1. 各HTML5游戏框架对比
3. 对于Crafty、Lime、Frozen、Melon、Impact、Quintus框架，可以在
上查看用这些引擎开发同一个游戏的效果以及代码风格。Breakouts中使用到的特性包括碰撞检测、精灵动画、音效、地图、场景切换、交互、文字渲染、移动平台支持。
4. 以上各引擎中，除了Construct2、ImpactJS、GameMaker是收费的之外，其他引擎都是免费并且开源的。对于开源引擎，我们可以从Github上面的关注度了解到该引擎的流行程度，关注的人越多，遇到问题越容易解决。同时一般来说，项目开发者越多，版本更新越快；项目的进行时间越长则越成熟。下面将对各开源引擎的开发者人数、项目启动时间、关注度进行对比。
Game Engine
Github commits
Github contributors
Start time
Github Star
Github Fork
（最近才开源）
Cocos2d-html5
以上各引擎中，Construct2、ImpactJS、GameMaker三个是收费的，其中Construct2与GameMaker更像一个游戏开发工具，可以实现不用写一行代码来制作游戏，更适合于没有编程基础的人使用。而ImpactJS作为一个高质量的框架，且易于扩展，虽然是收费的，但是物有所值。
开源引擎中，three.js是最火的，但是仅限于开发3D游戏。其次是CreateJS，由Adobe官方赞助且采用Flash类似的API以及模块化开发，是Flash开发者以及将Flash游戏转换成html5不可多得的选择。Turbulenz虽然开源时间比较晚，但颇有后来者居上的趋势，由于其对2D和3D的同时支持，是同时开发2D和3D游戏的最佳选择。LimeJS与Crafty相比的优势在于有一个公司进行维护，相比个人要更稳定，但是需要依赖于Google
Closure，也使之成为一个重量级的框架。Crafty体积小、轻量级，更适合于小游戏的开发。Cocos2d-html5作为国产框架的一个优势在于中文文档和教程多，且得到了Google的支持，但相比ImpactJS、CreateJS仍不够成熟。melonJS、Quintus、lycheeJS的开发者和使用者都较少，相关文档和教程也相对少，还有待观察。
如果大家觉得对自己有帮助的话，还希望能帮顶一下，谢谢：）
个人博客：
本文地址：
转载请注明出处，谢谢！
作者：zhaoxy2850 发表于 23:59:13
阅读：9 评论：0
相关 [html5 游戏 框架] 推荐：
- CSDN博客推荐文章
本文主要选取了Construct2、ImactJS、LimeJS、GameMaker、CreateJS、lycheeJS、Crafty、three.js、melonJS、Turbulenz、Quintus、Cocos2d-html5等进行了简要介绍和对比，主要是根据网上的资料整理而成. Construct 2是一个运行于Windows平台的游戏制作工具，它可以让没有任何编程基础的用户在短时间内不写一行代码快速开发出一款可运行于所有平台（Windows、Mac、Linux、Android、iOS等）的游戏.
- 淡忘~浅思
由于很多人都在用JavaScript、HTML5和WebGL技术创建基于浏览器的3D游戏，所有JavaScript 3D游戏引擎是一个人们主题. 基于浏览器的游戏最棒的地方是平台独立，它们能在iOS、Android、Windows或其他任何平台上运行. 有很多的JavaScript能够用于创建基于浏览器、使用HTML5和WebGL的3D游戏.
- 我爱互联网
在拉斯维加斯正在举行的CES大会上，微软CEO鲍尔默宣布了基于IE9和
html 5框架的
割绳子游戏，由微软及游戏开发商ZeptoLab共同推出，用于促进IE9的使用及网页的美化，网页版点击这里. 游戏主角就是一个贪吃的小绿怪兽，必须通过割绳子来将糖果送到小怪物嘴里，并搜集星星来增加得分. 到目前为止，下载量已经超过6000万，潜力足以和《愤怒的小鸟》媲美.
游戏工作室Wooga开源了其开发的HTML5游戏Pocket Island，源代码托管在GitHub上，该公司在官方博客上介绍了他们的开发经验，认为HTML5游戏有潜力，但尚未做好准备，开源的意图将是让其他人了解他们的工作，学习和改进. Wooga认为，2012年也许不是HTML5的黄金时代，但它的黄金时代即将到来.
- Web前端 - ITeye博客
这篇文章继续我们的框架大荟萃，如果你没有阅读前面的文章，请点击这里查看
PHP框架. 数以百万计的设计师和工程师都接受使用foundation框架来作为产品或者网站的前端设计. foundation是第一个支持响应式，语义化， 移动为先的开源框架. 最近Foundation5已经发布，作为当今最快速的发布版本工具，在很多方便比如开发产品和网站都很快.
- Yishen - 小众软件
塔防类游戏还是很受人喜爱的，今天的这个塔防是用 HTML5 写成的，虽然是简单的画面，但是深得塔防精髓. 官方网站 | 来自小众软件. (C)2011 root for 小众软件 | 原文链接 | 0 留言 | 加入我们 | 投稿 | 订阅指南. vNES – 经典的在线电视游戏. 玛丽猫 – 经典的变态超级玛丽.
- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能，但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制，你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.
- 壮壮爱 - 译言-每日精品译文推荐
来源HTML5 and CSS3: Wireframing in the final product. 框架是Photoshop和网页经典的比较之处. 现有的框架和原型工具不能准确体现网站的需求. 静态设计的网站不能在web浏览器上浏览. 而且当你完成网站最终建设，网页上一些元素看起来和草稿中相对应元素不完全一样，客户端会发现那些字体定位上的细微的区别.
- CSDN博客推荐文章
HTML5应用框架-Lavaca介绍. 作者：chszs，转载需注明. 博客主页：http://blog.csdn.net/chszs. Lavaca是一个全功能的HTML5应用框架，专注于快速、简便的构建Web应用. Lavaca是一个完整的构建系统，内建了配置以适应于不同的环境. 随着构建系统打包HTML、CSS和JavaScript，还有一个JavaScript文档生成根据，一个单元测试框架和数个通用的JavaScript库.
原文作者Julio Rivera是一名来自纽约市的创意总监和网页设计师，他是Underworld Magazines的创始人. 到现在为止，我玩了好几年的在线游戏. 我已经看过用Flash和其他软件制作游戏，目前是在用HTML5做游戏，只看到一个完整用CSS3做的游戏.
坚持分享优质有趣的原创文章，并保留作者信息和版权声明，任何问题请联系：@。