随着HTML5标准终于敲定。HTML5将有望成为游戏开发领域的的热门平台。
HTML5游戏能够执行于包含iPhone系列和iPad系列在内的计算机、智能手机以及平板电脑上，是眼下跨平台应用开发的最佳实施方案。
本文系依据[HML5 Canvas游戏开发实战]一书中的内容整理而成，是了解和学习HTML5游戏开发的基础内容，希望能够帮助到那些和博主一样致力于游戏开发的朋友们。
对于游戏开发来说，面向对象编程（OOP）是一种重要并且必要的方法。所以在了解HTML5游戏开发前，首先应该了解JavaScript中的面向对象编程。JavaScript是一种基于对象的语言。可它并非一种真正的面向对象的编程语言，由于在JavaScript的语法中不存在类（Class）的概念。以下我们将分析和解决在JavaScript中实现封装、继承等面向对象的问题。
HTML5提供了图像、视频、音频、表单、位置、本地数据库、离线存储、websocket等各种全新的特性，对于HTML游戏开发而言，我们主要关注图像、音频、本地数据库以及websocket等，首先我们来了解下Canavs画图的基础内容。
Canvas是HTML5为我们提供的一张画布，能够让我们在HTML上直接绘制图形，因此Canvas能够作为HTML5游戏开发的基本元素，即HTML5游戏引擎的底层都是以Canvas元素来驱动的。Canvas本身没有画图的能力，须要借助于JavaScript来实现画图的功能。使用Canvas元素仅仅须要在网页中加入canvas标记就可以。如
接下来我们通过JavaScript来获取这个Canvas并通过相关API实现画图环境的初始化
由于眼下Canvas仅仅支持2D画图，因此，这里的參数临时仅仅能为2d。由于Cnavas画图的API都封装在ctx这个实例中，因此以下的全部操作都是基于ctx来实现的：
或者
假设须要对矩形进行填充
相同地。能够使用fill进行填充绘制
绘制圆角矩形须要arcTo函数配合lineTo来完毕
在HTML5中能够通过quadraticCurveTo函数绘制二次贝塞尔曲线，通过bezierCurveTo函数绘制三次贝塞尔曲线，详细代码请參考API文档。
绘制图片使用drawImage函数，其函数原型例如以下：
当中image能够是HTML中的标签或者是JavaScript中的Image对象。如
接下来通过getElementById来取得图像数据，并将其绘制出来
假设直接使用JavaScript代码
使用translate函数实如今水平和垂直方向上的平移
使用rotate函数实现旋转，须要注意的是传入的參数是弧度
使用scale函数实现伸缩，当參数为负值时表示在该方向上翻转
这里主要介绍线性渐变、径向渐变、颜色反转、灰度。
线性渐变
径向渐变
颜色反转
遍历每一个像素并对RGB值进行取反
灰度
灰度计算公式：gary=red*0.3+green*0.59+blue*0.11
基础的内容就是这些了，以后假设碰到须要HTML5的地方能够回过头来看看。
|
