用HTML5把Canvas緩衝區內容輸出到屏幕

2020-12-02 IT168

　　【IT168技術】歡迎來到我的HTML5遊戲編程小教程。我會儘量簡要說明如何使用HTML5 canvas元素和JavaScript創建簡單的遊戲。本教程將省略一些代碼，但絕非故意。您可以隨時查看我的遊戲演示。

　　HTML5有許多的神奇功能，諸如:

　　畫布元素

　　視頻和音頻的支持

　　本地存儲

　　離線Web應用程式

　　地理定位

　　…

　　這篇文章不打算覆蓋所有的HTML5規範，有關HTML5的更多信息，請參考HTML5:http://diveintohtml5.org/.

　　之前，我們使用使用HTML編寫網頁遊戲，現在卻在使用HTML5。那麼兩者有區別嗎?元素用來創建客戶端遊戲時非常方便。針對客戶端遊戲編程，Canvas和JavaScript使用起來非常簡單。

　　典型的遊戲類

　　在開始我們的遊戲實現和畫布元素之前，我想很快向您展示典型的遊戲類結構:

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
}
}

　　這是一個典型的JavaScript遊戲骨架。有趣的是「setInterval」方法。當完成所有資源的加載後，我們可以開始主要的遊戲循環，收集用戶輸入，執行計算，並每隔X毫秒渲染我們的遊戲。這種方式特別適用於哪些後臺有計算程序，人工智慧運動、動畫等相關的遊戲。對於哪些只基於用戶輸入而重畫遊戲內容的靜態遊戲，可以修改這個框架類和去除遊戲循環。

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
}
}

　　這兩個遊戲更新和重畫操作均只發生於用戶輸入。這種方法有效減少了CPU負載，只適用於簡單的遊戲。

　　我要給你示例一個大家熟知的非常簡單的經典遊戲Sokoban。幾乎每個遊戲平臺都有不同版本的sokoban，但是我還沒有看到任何使用canvas元素的應用。

${PageNumber}

　　canvas入門

　　讓我們僅使用單個canvas元素，開始創建我們的HTML5頁面。

<html>
<head>
<title>Sokoban</title>
</head>
<body>
<canvas id="canvas" width="800" height="500">
Canvas not supported.
</canvas>
</body>
</html>

　　就是這樣!現在我們可以看到一個支持Canvas元素的空白頁面，出現在支持的瀏覽器：Chrome、Firefox和Safari。IE 8以及相應的舊版本不支持Canvas。

　　在我們開始利用畫布繪畫前，我們需要得到繪圖上下文。Canvas公開一個或多個繪圖上下文，但是我們將專注於最受歡迎的一個——「2 d」上下文。

　　讓我們添加一個引用JavaScript文件後直接我們關閉canvas標記:

<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上下文相關的繪畫方法，他們是：

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用於在畫布上放置文本。

　　點擊以下連結，瀏覽演示內容：

　　http://demo2.felinesoft.com/Sokoban/Home/Test01 

　　關於渲染2個矩形，文本和圖像的JavaScript源文件，可以在這裡找到:

　　http://demo2.felinesoft.com/Sokoban/Scripts/Test01.js 

　　這就是測試頁面：

　　雙緩衝

　　因為我們現在有一個遊戲骨架，我們也知道如何利用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緩衝區的內容輸出到屏幕。就這麼簡單!

相關焦點

  • HTML5調用攝像頭並拍照
    利用html5特性，調用攝像頭，並利用canvas拍照先簡單的添加需要的控制項<video id="video" autoplay=""style='width:640px;height:480px'></video><button id='picture
  • html5 canvas畫布繪製矩形和圓形
    html5為我們提供了非常有特色的標籤，canvas標籤為我們可以實現在網頁中畫畫提供了便利，接下來我們列舉他的常用操作。新建一個html5的文檔，建立一個canvas畫布，設置長寬，這裡需要特別注意，canvas標籤可以在標籤內設置width,height,也能通過css來設置，但是通過css來設置的標籤，當繪製圖形的時候會變形，所以我們建議直接在標籤內設置。
  • html5中nav標籤(導航連結)的詳細介紹
    本篇將介紹html5中nav標籤（導航連結）的詳細用法，有興趣的朋友可以了解一下！在html5版本中，新增了很多語義標籤，比如：header標籤、footer標籤、aside標籤、nav標籤等等。這些語義標籤沒有實際的顯示效果，只是起到語義的作用。今天小編要介紹的就是其中一個，即nav標籤。
  • HTML 5 Canvas 遞歸畫樹
    上圖就是用html5隨機生成的大樹 : ) 但是你應該沒想到40+行代碼就可以搞定了吧~接下來就跟大家說說這棵大樹是如何實現的。同樣必須要有html容器。 type="text/javascript" src="tree.js"></script> </body> </html> 接下來咱們開始tree.js:var canvas = document.createElement("canvas");  var ctx = canvas.getContext
  • Canvas框架-FabricJS簡介
    demo通過fabric.Canvas獲取到canvas元素，並可以對canvas進行相應的設置,既可以通過獲取已存在的canvas元素，fabric也支持創建canvas元素，同樣也能對其進行相應操作與原生的異同
  • 使用HTML5和Javascript設計繪圖程序
    HTML5的一個新的特性是canvas畫布功能，通過canvas畫布的強大功能可以實現繪畫不少圖形和其他絢麗的功能。在本文中，讀者將學習到如下幾個知識點：　　1) 如何動態在canvas畫布上繪畫圖形　　2) HTML 5 canvas的前景特性探討　　3) 目前瀏覽器對HTML5的兼容情況　　本文的讀者對象為，對HTML 5 Canvas有初步認識及熟悉Javascript的讀者。
  • matplotlib如何實現圖形繪製在tkinter的Canvas中?
    下面就是最重要的tkinter和matplotlib集成部分，matplotlib提供FigureCanvasTkAgg對象，只需三行代碼，實現圖形繪製在tkinter的Canvas中：canvas_l = FigureCanvasTkAgg(figure_l, frame_l)# 用draw代替canvas_l.draw()canvas_l.get_tk_widget
  • 如何用 JavaScript+Canvas 開發一款超級燒腦小遊戲?
    可參考微信官方縮放策略調整另外，需要注意的是，這裡的 canvas 是由 weapp-adapter 預先調用 wx.createCanvas() 創建一個上屏 Canvas，並暴露為一個全局變量 canvas。如何繪製任意多邊形圖形？
  • JS+Canvas 帶你體驗「偶消奇不消」的智商挑戰
    const ratio = wx.getSystemInfoSync().pixelRatiolet ctx = canvas.getContext('2d')canvas.width = screenWidth * ratiocanvas.height = screenHeight
  • 八大瘋狂的 HTML5 Canvas 及 WebGL 動畫效果
    粒子動畫 使用浮點紋理和FBO來實現的動畫，由粒子組成一匹奔跑的駿馬。 三維液體 用3D的方式呈現經典的2D水面效果算法。 蠕蟲 HTML5 Canvas製作的效果，無數條蠕蟲根據灰度組成圖片，你還可以拖拽一張本地圖片到右側。
  • 知識普及:天煞的HTML5到底是個什麼東西
    一個替代Flash的新」canvas」標記對於Web用戶來說，Flash既是一個驚喜，也是一種痛苦。有很多的Web開發人員對HTML5對Flash產生的威脅很不滿。但對於那些忍受著要花幾年時間加載和運行的臃腫的Flash視頻的人來說，用新的 「canvas」 標記生成視頻的技術已經到來。
  • 彩電行輸出變壓器輸出電壓是多少
    二、電流檢查法此種方法適用於檢查行輸出變壓器繞組匝間短路故障。用萬用表電流擋串接在行輸出變壓器初級迴路上作檢測，當電流大幅度增加，大於500mA時，可以判斷行高壓繞組發生短路。但用這種方法對於行輸出變壓器低壓繞組匝間短路就不易檢查出來。
  • 2012世界面臨毀滅 用Chrome幫你逃離地球
    如果你想體驗的話就需要一款對html5完美支持的瀏覽器，筆者這次是用Chrome瀏覽器測試的，下面是實際的網頁效果。由於採用了html5技術這段MV不僅可以觀看，而且會跟著你的滑鼠做一些視角上的互動非常有意思。
  • 通過LAN口,讓RTB示波器投屏到電腦屏幕
    RTB2000數字示波器便於您通過LAN或網際網路與任何計算機/投影儀共享示波器的顯示內容。該示波器配有一個RJ-45乙太網口以及一個內置WEB伺服器（標配）。將示波器直接連接到個人電腦、通過LAN口或通過網際網路，即可顯示屏幕。
  • 用Python複製文件的9個方法
    () 方法Shutil Copyfile()方法只有當目標是可寫的，這個方法才會將源內容複製到目標位置。然後它會打開文件並讀取指定緩衝區大小的塊。但是，默認是一次讀取整個文件。copyfile(source_file, destination_file)以下是關於 copyfile() 方法的要點。它將源內容複製到目標文件中。如果目標文件不可寫入，那麼複製操作將導致 IOError 異常。
  • 聯想拯救者Y7000P筆記本雙顯卡輸出模式是什麼 有什麼用
    雖然名稱有所不同，但其實原理都是大同小異：在日常使用時，系統採用的是處理器內的集成顯卡；而當軟體偵測到性能需求（如運行大型遊戲）時，便會啟動獨立顯卡進行工作，保證性能輸出。 乍聽起來，這是一個各得兼顧的手法，然而這種方式卻存在莫大的弊端：在需要獨立顯卡工作的時候，並不是由獨立顯卡直接輸出，而是要將處理的結果先發送到集成顯卡，最終才能將畫面呈現到屏幕上。