HTML5 学习总结（四）canvas绘图 WebGL SVG(4)_H5之家 - 中国HTML5教程资源分享第一站

Three.js的示例代码：

<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>Three.js</title> </head> <body> <script src='js/three.min.js' type='text/javascript' charset='utf-8'></script> <script type='text/javascript'> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.CubeGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render(); </script> </body> </html>

three.js示例运行结果：

2.1、HTML5游戏开发

随着HTML5的发展与硬件性能的提升HTML5游戏开发越来越受到游戏开发者的重视，因为WebGL存在一定的复杂度，所有产生了许多优秀的开源HTML5游戏引擎，下面是github上开源免费的HTML5游戏引擎：

Name Updated Time Watch Star Fork Commits Contributors

Three.js 2016/3/28 1590 24041 7768 14825 588

Phaser 2016/2/18 837 11782 4095 4423 206

Pixi.js 2016/3/17 656 10063 1942 2860 161

egret 2016/3/30 215 1275 303 4268 25

enchantjs 2016/1/4 185 1445 301 1683 27

crafty 2016/3/21 134 2050 473 1807 106

turbulenz 2015/11/23 271 2544 406 1737 13

cocos2d-js 2016/3/30 162 1207 469 4559 45

playcanvas 2016/3/30 164 1784 368 5142 16

melonjs 2016/3/30 13 1579 371 3907 40

quintus 2016/2/3 136 1023 412 256 33

Hilo 2016/2/3 173 2449 340 20 2

2.2.1、Cocos2D-HTML5

开源，免费的HTML5 2D游戏开发框架，Cocos2D拥有几个主要版本，包括Cocos2D-iPhone、Cocos2D-X，以及被社区普遍看好的Cocos2D-HTML5和JavaScriptbindings for Cocos2D-X。CocoStudio工具集是开源游戏引擎。特点：与Cocos2d的API类似，容易上手、中文文档齐全，资料丰富、基于MIT协议的开源引擎。它由国内Cocos2d-x核心团队主导开发和维护，行业领袖、HTML5大力推动者Google为这个项目提供支持。

github:https://github.com/cocos2d/cocos2d-html5

官网：

HelloWorld示例：

<!DOCTYPE html> <html> <head> <title>Hello Cocos2d-JS</title> </head> <body> <canvas id='gameCanvas' width='800' height='450'></canvas> <script type='text/javascript' src='cocos2d-js-v3.12-lite.js' charset='UTF-8'></script> <script type='text/javascript'> window.onload = function(){ cc.game.onStart = function(){ //load resources cc.LoaderScene.preload(['HelloWorld.png'], function () { var MyScene = cc.Scene.extend({ onEnter:function () { this._super(); var size = cc.director.getWinSize(); var sprite = cc.Sprite.create('HelloWorld.png'); sprite.setPosition(size.width / 2, size.height / 2); sprite.setScale(0.8); this.addChild(sprite, 0); var label = cc.LabelTTF.create('Hello World', 'Arial', 40); label.setPosition(size.width / 2, size.height / 2); this.addChild(label, 1); } }); cc.director.runScene(new MyScene()); }, this); }; cc.game.run('gameCanvas'); }; </script> </body> </html>

运行结果：

2.2.2、Egret（白鹭引擎）

是一个基于TypeScript语言开发的HTML5游戏引擎，围住神经猫就是用这个框架开发的。

官网：

特点：

a)、基于TypeScript及JavaScript技术，支持Flash到Egret高效转换，引擎、工具、运行时完整工作流
b)、跨平台：HTML5,iOS,Android,Windows Phone
c)、全中文文档：文档与开发者社区齐全
d)、开源免费，BSD开源协议、任意定制及扩展

三、SVG

SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言（XML），用于描述二维矢量图形的一种图形格式。SVG是W3C('World Wide Web ConSortium' 即 ' 国际互联网标准组织')在2000年8月制定的一种新的二维矢量图形格式，也是规范中的网络矢量图形标准。SVG严格遵从XML语法，并用文本格式的描述性语言来描述图像内容，因此是一种和图像分辨率无关的矢量图形格式。SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。

特点：

1．任意放缩
用户可以任意缩放图像显示，而不会破坏图像的清晰度、细节等。
2．文本独立
SVG图像中的文字独立于图像，文字保留可编辑和可搜寻的状态。也不会再有字体的限制，用户系统即使没有安装某一字体，也会看到和他们制作时完全相同的画面。
3．较小文件
总体来讲，SVG文件比那些GIF和JPEG格式的文件要小很多，因而下载也很快。
4．超强显示效果
SVG图像在屏幕上总是边缘清晰，它的清晰度适合任何屏幕分辨率和打印分辨率。
5．超级颜色控制
SVG图像提供一个1600万种颜色的调色板，支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。
6．交互X和智能化。SVG面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式Flash竞争的问题，另一个问题就是SVG的本地运行环境下的厂家支持程度。

浏览器支持：