核心要點(diǎn)

• HTML5 canvas 元素允許將多媒體內(nèi)容（包括線條圖、圖像文件和動(dòng)畫(huà)）原生集成到網(wǎng)頁(yè)中，可用於創(chuàng)建滑動(dòng)拼圖遊戲。
• canvas 繪圖通過(guò)上下文進(jìn)行，該上下文通過(guò) JavaScript 函數(shù) getContext() 初始化。 JavaScript 中的 drawImage() 函數(shù)用於在 canvas 上顯示圖像，不同的參數(shù)選項(xiàng)允許調(diào)整圖像大小和提取圖像部分。
• 滑動(dòng)拼圖的遊戲邏輯涉及創(chuàng)建二維數(shù)組來(lái)表示棋盤(pán)。每個(gè)元素都是一個(gè)對(duì)象，具有定義其在拼圖網(wǎng)格中位置的 x 和 y 坐標(biāo)。棋盤(pán)初始化時(shí)，每個(gè)拼圖塊都位於與其正確位置相反的棋盤(pán)方格中。
• 用戶輸入事件會(huì)觸發(fā)函數(shù)，這些函數(shù)會(huì)重新計(jì)算圖塊的數(shù)量和大小，跟蹤鼠標(biāo)移動(dòng)以識(shí)別被點(diǎn)擊的圖塊，並檢查拼圖是否已解決。 drawTiles() 函數(shù)會(huì)使用新位置的被點(diǎn)擊圖塊重新繪製棋盤(pán)。

HTML5 包含許多功能，可以將多媒體原生集成到網(wǎng)頁(yè)中。其中一項(xiàng)功能是 canvas 元素，它是一個(gè)可以填充線條圖、圖像文件或動(dòng)畫(huà)的空白畫(huà)布。在本教程中，我將通過(guò)創(chuàng)建一個(gè)滑動(dòng)拼圖遊戲來(lái)演示 HTML5 canvas 的圖像處理功能。要將 canvas 嵌入網(wǎng)頁(yè)，請(qǐng)使用 <canvas></canvas> 標(biāo)籤：

<canvas height="480px" width="480px"></canvas>

width 和 height 屬性以像素設(shè)置 canvas 大小。如果未指定這些屬性，則寬度默認(rèn)為 300px，高度默認(rèn)為 150px。 canvas 繪圖通過(guò)上下文進(jìn)行，該上下文通過(guò) JavaScript 函數(shù) getContext() 初始化。 W3C 指定的二維上下文恰當(dāng)?shù)胤Q為“2d”。因此，要為 ID 為“canvas”的 canvas 初始化上下文，我們只需調(diào)用：

document.getElementById("canvas").getContext("2d");

下一步是顯示圖像。 JavaScript 只為此提供一個(gè)函數(shù) drawImage()，但有三種方法可以調(diào)用此函數(shù)。在其最基本的形式中，此函數(shù)採(cǎi)用三個(gè)參數(shù)：圖像對(duì)像以及距 canvas 左上角的 x 和 y 偏移量。

drawImage(image, x, y);

也可以添加另外兩個(gè)參數(shù) width 和 height 來(lái)調(diào)整圖像大小。

drawImage(image, x, y, width, height);

drawImage() 的最複雜形式採(cǎi)用九個(gè)參數(shù)。第一個(gè)是圖像對(duì)象。接下來(lái)的四個(gè)參數(shù)依次是源 x、y、寬度和高度。其餘四個(gè)參數(shù)依次是目標(biāo) x、y、寬度和高度。此函數(shù)會(huì)提取圖像的一部分以在 canvas 上繪製，並在必要時(shí)調(diào)整其大小。這允許我們將圖像視為精靈表。

<canvas height="480px" width="480px"></canvas>

所有形式的 drawImage() 都有一些注意事項(xiàng)。如果圖像為空，或水平或垂直維度為零，或源高度或?qū)挾葹榱?，則 drawImage() 將引發(fā)異常。如果瀏覽器無(wú)法解碼圖像，或者在調(diào)用函數(shù)時(shí)圖像尚未完成加載，則 drawImage() 將不會(huì)顯示任何內(nèi)容。這就是使用 HTML5 canvas 進(jìn)行圖像處理的全部?jī)?nèi)容?，F(xiàn)在讓我們?cè)趯?shí)踐中看看它。

document.getElementById("canvas").getContext("2d");

此 HTML 塊包含另一個(gè) HTML5 功能，即範(fàn)圍輸入，它允許用戶使用滑塊選擇數(shù)字。稍後我們將看到範(fàn)圍輸入如何與拼圖交互。但請(qǐng)注意：儘管大多數(shù)瀏覽器都支持範(fàn)圍輸入，但在撰寫(xiě)本文時(shí)，兩個(gè)更流行的瀏覽器——Internet Explorer 和 Firefox——仍然不支持。如上所述，要在 canvas 上繪製，我們需要一個(gè)上下文。

drawImage(image, x, y);

我們還需要一張圖片。您可以使用下面引用的圖片或任何其他適合（或可以調(diào)整大小以適合）canvas 的方形圖片。

drawImage(image, x, y, width, height);

事件偵聽(tīng)器用於確保在瀏覽器嘗試?yán)L製圖像之前，圖像已完成加載。如果圖像未準(zhǔn)備好繪製，則 canvas 不會(huì)顯示圖像。我們將從拼圖 canvas 獲取棋盤(pán)大小，並從範(fàn)圍輸入獲取圖塊數(shù)量。此滑塊的範(fàn)圍為 3 到 5，數(shù)值表示行數(shù)和列數(shù)。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);

使用這兩個(gè)數(shù)字，我們可以計(jì)算圖塊大小。

  簡(jiǎn)單
  困難
  




  <canvas height="480px" width="480px"></canvas>

現(xiàn)在我們可以創(chuàng)建棋盤(pán)了。

var context = document.getElementById("puzzle").getContext("2d");

setBoard() 函數(shù)是我們定義和初始化虛擬棋盤(pán)的地方。表示棋盤(pán)的自然方法是使用二維數(shù)組。在 JavaScript 中，創(chuàng)建這樣的數(shù)組並不是一個(gè)優(yōu)雅的過(guò)程。我們首先聲明一個(gè)扁平數(shù)組，然後聲明數(shù)組的每個(gè)元素為一個(gè)數(shù)組。然後可以像訪問(wèn)多維數(shù)組一樣訪問(wèn)這些元素。對(duì)於滑動(dòng)拼圖遊戲，每個(gè)元素都將是一個(gè)對(duì)象，具有定義其在拼圖網(wǎng)格中位置的 x 和 y 坐標(biāo)。因此，每個(gè)對(duì)象將具有兩組坐標(biāo)。第一組將是其在數(shù)組中的位置。這表示其在棋盤(pán)上的位置，因此我將其稱為棋盤(pán)方格。每個(gè)棋盤(pán)方格都有一個(gè)對(duì)象，其 x 和 y 屬性表示其在拼圖圖像中的位置。我將此位置稱為拼圖塊。當(dāng)棋盤(pán)方格的坐標(biāo)與其拼圖塊的坐標(biāo)匹配時(shí)，該圖塊位於拼圖求解的正確位置。在本教程中，我們將每個(gè)拼圖塊初始化到與其在拼圖中正確位置相反的棋盤(pán)方格。例如，右上角的圖塊將位於左下角的棋盤(pán)方格中。

...(後續(xù)代碼省略，因?yàn)槠^(guò)長(zhǎng)，且核心邏輯已在前面概述。 完整的代碼需要根據(jù)原文提供。)

最後，使用新位置的被點(diǎn)擊圖塊重新繪製棋盤(pán)。

...(後續(xù)代碼省略)

這就是全部?jī)?nèi)容！ canvas 元素以及一些 JavaScript 和數(shù)學(xué)知識(shí)，為 HTML5 帶來(lái)了強(qiáng)大的原生圖像處理功能。

您可以在 http://www.miracleart.cn/link/15fd459bc66aa8401543d8f4d1d80d97 (鏈接可能失效) 找到滑動(dòng)拼圖的實(shí)時(shí)演示。

關(guān)於使用 HTML5 Canvas 和滑動(dòng)拼圖進(jìn)行圖像處理的常見(jiàn)問(wèn)題 (FAQ)

如何使用 HTML5 Canvas 創(chuàng)建滑動(dòng)拼圖遊戲？

使用 HTML5 Canvas 創(chuàng)建滑動(dòng)拼圖遊戲涉及幾個(gè)步驟。首先，您需要在 HTML 文件中創(chuàng)建一個(gè) canvas 元素。然後，在 JavaScript 文件中，您需要引用此 canvas 及其 2D 上下文，這將允許您在其上繪製。然後，您可以將圖像加載到 canvas 上並將其分成圖塊網(wǎng)格。可以對(duì)這些圖塊進(jìn)行改組以創(chuàng)建初始拼圖狀態(tài)。然後可以實(shí)現(xiàn)遊戲邏輯，包括移動(dòng)圖塊和檢查獲勝條件。

如何使用 Canvas API 處理像素？

Canvas API 提供了一種名為 getImageData() 的方法，允許您從 canvas 的指定區(qū)域檢索像素?cái)?shù)據(jù)。此方法返回一個(gè) ImageData 對(duì)象，其中包含像素值的數(shù)組。每個(gè)像素由四個(gè)值（紅色、綠色、藍(lán)色和 alpha）表示，因此您可以處理這些值以更改單個(gè)像素的顏色。要應(yīng)用這些更改，您可以使用 putImageData() 方法。

HTMLCanvasElement 中的 toDataURL() 方法是什麼？

HTMLCanvasElement 中的 toDataURL() 方法是一個(gè)強(qiáng)大的工具，允許您創(chuàng)建一個(gè)數(shù)據(jù) URL，表示 canvas 中顯示的圖像。此數(shù)據(jù) URL 可用作圖像元素的源、保存到數(shù)據(jù)庫(kù)或發(fā)送到服務(wù)器。該方法採(cǎi)用一個(gè)可選參數(shù)，指定圖像格式。如果沒(méi)有提供參數(shù)，則默認(rèn)格式為 PNG。

如何為 GitHub 上的滑動(dòng)拼圖遊戲項(xiàng)目做出貢獻(xiàn)？

GitHub 是一個(gè)平臺(tái)，開(kāi)發(fā)人員在該平臺(tái)上共享他們的項(xiàng)目並與其他人合作。如果您想為滑動(dòng)拼圖遊戲項(xiàng)目做出貢獻(xiàn)，您可以從分叉存儲(chǔ)庫(kù)開(kāi)始，這會(huì)在您自己的 GitHub 帳戶中創(chuàng)建項(xiàng)目的副本。然後，您可以將此存儲(chǔ)庫(kù)克隆到本地機(jī)器，進(jìn)行更改，並將這些更改推回您的分叉存儲(chǔ)庫(kù)。最後，您可以打開(kāi)一個(gè)拉取請(qǐng)求，以建議您對(duì)原始存儲(chǔ)庫(kù)的更改。

如何使用 canvas 進(jìn)行圖像處理？

Canvas 提供了一種靈活且強(qiáng)大的方法來(lái)處理圖像。您可以將圖像繪製到 canvas 上，應(yīng)用變換並處理單個(gè)像素。例如，您可以通過(guò)迭代像素?cái)?shù)據(jù)並將紅色、綠色和藍(lán)色的值設(shè)置為原始值的平均值來(lái)創(chuàng)建灰度效果。您還可以通過(guò)對(duì)紅色、綠色和藍(lán)色的值應(yīng)用特定公式來(lái)創(chuàng)建棕褐色效果。處理圖像後，您可以使用 toDataURL() 方法導(dǎo)出結(jié)果。

以上是用HTML5畫(huà)布進(jìn)行圖像操縱：滑動(dòng)難題的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！