HTML5キャンバスによる画像操作：スライドパズル

コアポイント

• HTML5 Canvas Elementを使用すると、ライン図面、画像ファイル、アニメーションなどのマルチメディアコンテンツのネイティブ統合をWebページに統合し、スライドパズルゲームを作成するために使用できます。
• canvas描画は、JavaScript関数によって初期化されたコンテキストを通じて実行されますgetContext()。 JavaScriptのdrawImage()関数は、キャンバスに画像を表示するために使用され、さまざまなパラメーターオプションが画像のサイズを変更し、画像パーツを抽出することができます。
• スライディングパズルのゲームロジックには、ボードを表すために2次元配列を作成することが含まれます。各要素は、パズルグリッド内の位置を定義するxおよびy座標を持つオブジェクトです。ボードが初期化されると、各パズルピースは正しい位置の反対側のチェッカーボードの正方形にあります。
• ユーザー入力イベントは、タイルの数とサイズを再計算する機能をトリガーし、マウスの動きを追跡してクリックしているタイルを識別し、パズルが解決されたかどうかを確認します。 drawTiles()この関数は、新しい位置でクリックされたタイルを使用してボードを再描画します。

HTML5には、Webページへのマルチメディアネイティブ統合を可能にする多くの機能が含まれています。関数の1つはCanvas要素です。これは、行の図面、画像ファイル、またはアニメーションを埋めることができる空白のキャンバスです。このチュートリアルでは、スライドパズルゲームを作成して、HTML5キャンバスの画像処理機能を実証します。キャンバスをWebページに埋め込むには、<canvas></canvas>タグを使用してください：

<code class="language-html"><canvas height="480px" width="480px"></canvas></code>

widthおよびheightプロパティは、キャンバスサイズをピクセルで設定します。これらのプロパティが指定されていない場合、幅はデフォルトで300pxで、高さはデフォルトで150pxになります。キャンバス図面は、javaScript関数getContext()によって初期化されたコンテキストを通じて実行されます。 W3Cで指定された2次元コンテキストは、「2D」と適切に呼ばれます。したがって、ID「キャンバス」を使用してキャンバスのコンテキストを初期化するには、次のように呼び出す必要があります。

<code class="language-javascript">document.getElementById("canvas").getContext("2d");</code>

次のステップは、画像を表示することです。 JavaScriptはこれに関数

のみを提供しますが、この関数を呼び出すには3つの方法があります。最も基本的な形式では、この関数には、キャンバスの左上隅からの画像オブジェクトとxおよびyオフセットの3つのパラメーターが必要です。 drawImage()

<code class="language-javascript">drawImage(image, x, y);</code>

他の2つのパラメーターを追加して、画像をサイズ変更することもできます。

width 最も複雑な形式のheight

は、9つのパラメーターを取ります。最初のものは画像オブジェクトです。次の4つのパラメーターは、ソースx、y、幅、高さです。他の4つのパラメーターは、ターゲットx、y、幅、高さです。この関数は、画像の一部を抽出してキャンバスを描き、必要に応じてサイズを変更します。これにより、画像をスプライトテーブルとして扱うことができます。

<code class="language-javascript">drawImage(image, x, y, width, height);</code>

<code class="language-html"><canvas height="480px" width="480px"></canvas></code>

すべての形式のdrawImage()には、いくつかの予防策があります。画像が空の場合、または水平または垂直の寸法がゼロの場合、またはソースの高さまたは幅がゼロの場合、drawImage()は例外をスローします。ブラウザが画像をデコードできない場合、または関数が呼び出されたときに画像がまだロードされていない場合、drawImage()は何も表示されません。これは、画像処理にHTML5キャンバスを使用することです。それでは、実際にそれを見てみましょう。

<code class="language-javascript">document.getElementById("canvas").getContext("2d");</code>

このHTMLブロックには、別のHTML5機能である範囲入力が含まれています。これにより、ユーザーはスライダーを使用して番号を選択できます。後で、範囲入力がパズルとどのように相互作用するかを確認します。ただし、ほとんどのブラウザは範囲の入力をサポートしていますが、執筆時点では、2つの人気のあるブラウザー（Internet ExplorerとFirefox）がサポートされていません。上記のように、キャンバスを描くには、コンテキストが必要です。

<code class="language-javascript">drawImage(image, x, y);</code>

別の写真が必要です。以下に引用した画像またはキャンバスに合う（または適合するようにサイズ変更できる）他の正方形の画像を使用できます。

<code class="language-javascript">drawImage(image, x, y, width, height);</code>

イベントリスナーは、ブラウザがそれを描画しようとする前に画像がロードされていることを確認するために使用されます。画像を描画する準備ができていない場合、キャンバスは画像を表示しません。パズルキャンバスからボードサイズを取得し、範囲入力からタイルの数を取得します。このスライダーには3〜5の範囲があり、値は行と列の数を表します。

<code class="language-javascript">drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh);</code>

これら2つの数値を使用すると、タイルサイズを計算できます。

<code class="language-html"><div>
  <label>简单</label>
  <label>困难</label>
  <br><br>
</div>
<div>
  <canvas height="480px" width="480px"></canvas>
</div></code>

ボードを作成できます。

<code class="language-javascript">var context = document.getElementById("puzzle").getContext("2d");</code>

関数は、仮想ボードを定義および初期化する場所です。チェスボードを表す自然な方法は、2次元配列を使用することです。 JavaScriptでは、このような配列を作成することはエレガントなプロセスではありません。最初にフラット配列を宣言し、次に配列の各要素を配列として宣言します。これらの要素は、多次元配列にアクセスするのと同じようにアクセスできます。スライドパズルゲームの場合、各要素は、パズルグリッド内の位置を定義するxおよびy座標を持つオブジェクトになります。したがって、各オブジェクトには2セットの座標があります。最初のグループは、配列内の位置になります。これは、ボード上の位置を示しているため、チェッカーボードの広場と呼びます。各ボードスクエアには、パズル画像の位置をxおよびyプロパティを表すオブジェクトがあります。私はこの位置をパズルのピースと呼びます。ボードスクエアの座標がパズルピースの座標を一致させると、タイルはパズル解決の正しい位置にあります。このチュートリアルでは、各パズルピースを初期化して、パズルの正しい位置とは反対のチェッカーボードの正方形になります。たとえば、右上隅のタイルは、左下隅のチェスボード広場にあります。 setBoard()

...（長さが長すぎてコアロジックが以前に概説されているため、後続のコードは省略されています。完全なコードは、元のテキストに従って提供する必要があります。）

最後に、新しい位置でクリックしたタイルを使用してボードを再描画します。

...（後続のコードは省略されています）

これがすべてです！ Canvas ElementといくつかのJavaScriptと数学の知識は、強力なネイティブ画像処理機能をHTML5にもたらします。

https://www.php.cn/link/15fd459bc66aa8401543d8f4d1d1d80d97でスライドパズルのライブデモンストレーションを見つけることができます（リンクは無効です）。

HTML5キャンバスとスライドパズルを使用した画像処理に関するよくある質問（FAQ）

HTML5キャンバスを使用してスライドパズルゲームを作成する方法は？

HTML5キャンバスでスライドパズルを作成するには、いくつかのステップが含まれます。まず、HTMLファイルにキャンバス要素を作成する必要があります。次に、JavaScriptファイルで、このキャンバスとその2Dコンテキストを参照する必要があります。これにより、それを描画できます。その後、画像をキャンバスにロードして、タイルグリッドに分割できます。これらのタイルは、最初のパズル状態を作成するためにシャッフルできます。その後、タイルの移動や勝利条件の確認など、ゲームロジックを実装できます。

キャンバスAPIを使用してピクセルを処理する方法は？

canvas APIは、指定されたキャンバスの領域からピクセルデータを取得できるgetImageData()と呼ばれるメソッドを提供します。このメソッドは、ピクセル値の配列を含むImageDataオブジェクトを返します。各ピクセルは4つの値（赤、緑、青、アルファ）で表されるため、これらの値を処理して単一のピクセルの色を変更できます。これらの変更を適用するには、putImageData()メソッドを使用できます。

htmlcanvaselementのtoDataURL()メソッドは何ですか？

メソッドは、キャンバスに表示される画像を表すデータURLを作成できる強力なツールです。このデータURLは、画像要素のソースとして使用したり、データベースに保存されたり、サーバーに送信されます。このメソッドは、画像形式を指定するためのオプションのパラメーターを使用します。パラメーターが提供されていない場合、デフォルト形式はPNGです。

toDataURL()

Githubでのスライドパズルゲームプロジェクトに貢献する方法は？

Githubは、開発者がプロ​​ジェクトを共有し、他の人と協力するプラットフォームです。スライディングパズルプロジェクトに貢献したい場合は、フォーキングリポジトリから始めることができます。これにより、プロジェクトのコピーが作成されます。その後、このリポジトリをローカルマシンにクローンし、変更を加え、それらの変更をフォークリポジトリに戻すことができます。最後に、元のリポジトリの変更を提案するためにプルリクエストを開くことができます。

画像処理にキャンバスを使用する方法は？

Canvasは、画像を処理する柔軟で強力な方法を提供します。画像をキャンバスに描画し、変換を適用して、単一のピクセルを処理できます。たとえば、ピクセルデータを繰り返し、赤、緑、青の値を元の値の平均に設定することにより、グレースケール効果を作成できます。また、赤、緑、青の値に特定の式を適用することにより、日焼け効果を作成することもできます。画像を処理した後、

メソッドを使用して結果をエクスポートできます。

toDataURL()

以上がHTML5キャンバスによる画像操作：スライドパズルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。