HTML5 canvas 响应,用HTML5把Canvas缓冲区内容输出到屏幕

【IT168技术】欢迎来到我的HTML5游戏编程小教程。我会尽量简要说明如何使用HTML5 canvas元素和JavaScript创建简单的游戏。本教程将省略一些代码，但绝非故意。您可以随时查看我的游戏演示。

HTML5有许多的神奇功能，诸如:

画布元素

视频和音频的支持

本地存储

离线Web应用程序

地理定位

…

这篇文章不打算覆盖所有的HTML5规范，有关HTML5的更多信息，请参考HTML5:http://diveintohtml5.org/.

之前，我们使用使用HTML编写网页游戏，现在却在使用HTML5。那么两者有区别吗?元素用来创建客户端游戏时非常方便。针对客户端游戏编程，Canvas和JavaScript使用起来非常简单。

典型的游戏类

在开始我们的游戏实现和画布元素之前，我想很快向您展示典型的游戏类结构:

functionGame() {

this.Initialize=function() {//initialize all game variables

}

this.LoadContent=function() {//load content – graphics, sound etc.//since all contentisloaded run main gameloop//Calls RunGameLoop method every ‘draw interval’

this.GameLoop=setInterval(this.RunGameLoop, this.DrawInterval);

}

this.RunGameLoop=function(game) {

this.Update();

this.Draw();

}

this.Update=function() {//update game variables, handle user input, perform calculations etc.

}

this.Draw=function() {//draw game frame

}

}

这是一个典型的JavaScript游戏骨架。有趣的是“setInterval”方法。当完成所有资源的加载后，我们可以开始主要的游戏循环，收集用户输入，执行计算，并每隔X毫秒渲染我们的游戏。这种方式特别适用于哪些后台有计算程序，人工智能运动、动画等相关的游戏。对于哪些只基于用户输入而重画游戏内容的静态游戏，可以修改这个框架类和去除游戏循环。

functionGame() {

this.Initialize=function() {//initialize all game variables

}

this.LoadContent=function() {//load content – graphics, sound etc.

var ourGame=this;

$(document).bind('keyup', function (event) {ourGame.Update(event);

ourGame.Draw();

});

}

this.Update=function(event) {//update game variables, handle user input, perform calculations etc.

}

this.Draw=function() {//draw game frame

}

}

这两个游戏更新和重画操作均只发生于用户输入。这种方法有效减少了CPU负载，只适用于简单的游戏。

我要给你示例一个大家熟知的非常简单的经典游戏Sokoban。几乎每个游戏平台都有不同版本的sokoban，但是我还没有看到任何使用canvas元素的应用。${PageNumber}

canvas入门

让我们仅使用单个canvas元素，开始创建我们的HTML5页面。

SokobanCanvasnotsupported.

就是这样!现在我们可以看到一个支持Canvas元素的空白页面，出现在支持的浏览器：Chrome、Firefox和Safari。IE 8以及相应的旧版本不支持Canvas。

在我们开始利用画布绘画前，我们需要得到绘图上下文。Canvas公开一个或多个绘图上下文，但是我们将专注于最受欢迎的一个——“2 d”上下文。

让我们添加一个引用JavaScript文件后直接我们关闭canvas标记:

这就是部分的JavaScript文件。

var _canvas=document.getElementById('canvas');var _canvasContext=null;//check whether browser supports getting canvas contextif(_canvas&&_canvas.getContext) {

_canvasContext=_canvas.getContext('2d');//... drawing here ...

}

在本教程中，我将快速讲解canvas上下文相关的绘画方法，他们是：

rawImage(img,x,y);

•    fillRect(x,y,width、height);

•    strokeRect(x,y, width、height);

•    fillText(“text”,x,y);

重要提示：Canvas的开始坐标 (0,0)位于左上角。

这些方法非常简单。drawImage要么绘制指定Image对象，要么根据x，y坐标，绘画

元素。fillRect和strokeRect都用于绘图的矩形。唯一的区别是，fillRect是画一个填充色彩的矩形，而strokeRect是画一个空矩形，边框为彩色。fillText用于在画布上放置文本。

点击以下链接，浏览演示内容：

关于渲染2个矩形，文本和图像的JavaScript源文件，可以在这里找到:

这就是测试页面：

双缓冲

因为我们现在有一个游戏骨架，我们也知道如何利用Canvas绘图。在实现真正的游戏之前，唯一剩下的是双缓冲技术。不过我们不会活灵活现地演示这种技术，因为我们没有闪烁的动画效果。但是，既然这篇文章是你学习Canvas游戏的起点，我寻思着应该向您展示如何利用双缓冲技术在Canvas快速绘画。

双缓冲技术背后的想法是减少闪烁：首先基于内存缓冲区绘画，然后将内存中渲染完成的图像，刷入到屏幕上。

我们只需要稍微修改我们的Canvas的JavaScript:

_canvas=document.getElementById('canvas');if(_canvas&&_canvas.getContext) {

_canvasContext=_canvas.getContext('2d');_canvasBuffer=document.createElement('canvas');_canvasBuffer.width=_canvas.width;

_canvasBuffer.height=_canvas.height;

_canvasBufferContext=_canvasBuffer.getContext('2d');}

现在，我们就调用_canvasBufferContext 而非_canvasContext对象绘图了。如下：

_canvasContext.drawImage(_canvasBuffer, 0, 0);

这样就把Canvas缓冲区的内容输出到屏幕。就这么简单!