域名查詢
企業(yè)郵局
新技術(shù)應(yīng)用
用HTML5把Canvas緩沖區(qū)內(nèi)容輸出到屏幕
我們使用使用HTML編寫網(wǎng)頁(yè)游戲，現(xiàn)在卻在使用HTML5。那么兩者有區(qū)別嗎?元素用來創(chuàng)建客戶端游戲時(shí)非常方便。針對(duì)客戶端游戲編程，Canvas和JavaScript使用起來非常簡(jiǎn)單。
典型的游戲類
在開始我們的游戲?qū)崿F(xiàn)和畫布元素之前，我想很快向您展示典型的游戲類結(jié)構(gòu):
function Game() {
this.Initialize = function () {
// initialize all game variables
}
this.LoadContent = function () {
// load content – graphics, sound etc.
// since all content is loaded run main game loop
// 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
}
}
這是一個(gè)典型的JavaScript游戲骨架。有趣的是“setInterval”方法。當(dāng)完成所有資源的加載后，我們可以開始主要的游戲循環(huán)，收集用戶輸入，執(zhí)行計(jì)算，并每隔X毫秒渲染我們的游戲。這種方式特別適用于哪些后臺(tái)有計(jì)算程序，人工智能運(yùn)動(dòng)、動(dòng)畫等相關(guān)的游戲。對(duì)于哪些只基于用戶輸入而重畫游戲內(nèi)容的靜態(tài)游戲，可以修改這個(gè)框架類和去除游戲循環(huán)。
function Game() {
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
}
}
這兩個(gè)游戲更新和重畫操作均只發(fā)生于用戶輸入。這種方法有效減少了CPU負(fù)載，只適用于簡(jiǎn)單的游戲。
我要給你示例一個(gè)大家熟知的非常簡(jiǎn)單的經(jīng)典游戲Sokoban。濟(jì)南網(wǎng)頁(yè)制作(www.mwinds.net)幾乎每個(gè)游戲平臺(tái)都有不同版本的sokoban，但是我還沒有看到任何使用canvas元素的應(yīng)用。
canvas入門
讓我們僅使用單個(gè)canvas元素，開始創(chuàng)建我們的HTML5頁(yè)面。
<html>
<head>
<title>Sokoban</title>
</head>
<body>
<canvas id="canvas" width="800" height="500">
Canvas not supported.
</canvas>
</body>
</html>
就是這樣!現(xiàn)在我們可以看到一個(gè)支持Canvas元素的空白頁(yè)面，出現(xiàn)在支持的瀏覽器：Chrome、Firefox和Safari。IE 8以及相應(yīng)的舊版本不支持Canvas。
在我們開始利用畫布繪畫前，我們需要得到繪圖上下文。Canvas公開一個(gè)或多個(gè)繪圖上下文，但是我們將專注于最受歡迎的一個(gè)——“2 d”上下文。
讓我們添加一個(gè)引用JavaScript文件后直接我們關(guān)閉canvas標(biāo)記:
<script type="text/javascript" src="../Scripts/test01.js"></script>
這就是部分的JavaScript文件。
var _canvas = document.getElementById('canvas');
var _canvasContext = null;
//check whether browser supports getting canvas context
if (_canvas && _canvas.getContext) {
_canvasContext = _canvas.getContext('2d');
// ... drawing here ...
}
在本教程中，我將快速講解canvas上下文相關(guān)的繪畫方法，他們是：
rawImage(img,x,y);
? fillRect(x,y,width、height);
? strokeRect(x,y, width、height);
? fillText(“text”,x,y);
重要提示：Canvas的開始坐標(biāo) (0,0)位于左上角。
這些方法非常簡(jiǎn)單。drawImage要么繪制指定Image對(duì)象，要么根據(jù)x，y坐標(biāo)，繪畫
<Img>
元素。fillRect和strokeRect都用于繪圖的矩形。唯一的區(qū)別是，fillRect是畫一個(gè)填充色彩的矩形，而strokeRect是畫一個(gè)空矩形，邊框?yàn)椴噬�。fillText用于在畫布上放置文本。
點(diǎn)擊以下鏈接，瀏覽演示內(nèi)容：
http://demo2.felinesoft.com/Sokoban/Home/Test01
關(guān)于渲染2個(gè)矩形，文本和圖像的JavaScript源文件，可以在這里找到:
http://demo2.felinesoft.com/Sokoban/Scripts/Test01.js
這就是測(cè)試頁(yè)面：
雙緩沖
因?yàn)槲覀儸F(xiàn)在有一個(gè)游戲骨架，我們也知道如何利用Canvas繪圖。在實(shí)現(xiàn)真正的游戲之前，唯一剩下的是雙緩沖技術(shù)。不過我們不會(huì)活靈活現(xiàn)地演示這種技術(shù)，因?yàn)槲覀儧]有閃爍的動(dòng)畫效果。但是，既然這篇文章是你學(xué)習(xí)Canvas游戲的起點(diǎn)，我尋思著應(yīng)該向您展示如何利用雙緩沖技術(shù)在Canvas快速繪畫。
雙緩沖技術(shù)背后的想法是減少閃爍：首先基于內(nèi)存緩沖區(qū)繪畫，然后將內(nèi)存中渲染完成的圖像，刷入到屏幕上。
我們只需要稍微修改我們的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');
}
現(xiàn)在，我們就調(diào)用_canvasBufferContext 而非_canvasContext對(duì)象繪圖了。如下：
_canvasContext.drawImage(_canvasBuffer, 0, 0);
這樣就把Canvas緩沖區(qū)的內(nèi)容輸出到屏幕。就這么簡(jiǎn)單!
標(biāo)簽： 濟(jì)南網(wǎng)站建設(shè) 網(wǎng)站建設(shè) 濟(jì)南網(wǎng)站制作 網(wǎng)址： m.fanwen1688.com
- 打印本文
- 關(guān)閉本頁(yè)
- 建站服務(wù)熱線：0531-68808868 售后服務(wù)專線：0531-88961515
