英語とロシア語の辞書を信じているなら、canvasはcanvasとして翻訳されていることがわかります。Wikipediaを信じているなら、canvasタグはJavaScriptを使用してビットマップを作成するように設計されたHTML 5要素であることがわかります。 このビットマップの作成方法は、小さなテキスト専用です。 この困難なタスクを試してみる前に、HTMLとは何か、JavaScriptは何と一緒に使用されるかについての基本的な知識をすでに持っていることをお勧めします。
キャンバスの予備的な「調整」
実験タグには、高さと幅、高さと幅の2つの属性のみがあり、デフォルトのキャンバスサイズは150x300ピクセルです。
キャンバスは、コンテンツがコンテキストによって制御される固定サイズの領域を作成することに注意してください。
基本的な例：
<!doctype html> <html> <head> <title>canvasExample</title> <meta charset='utf-8' /> </head> <body> <canvas height='320' width='480' id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); ctx.fillRect(0, 0, example.width, example.height); </script> </body> </html>
これらの不幸な13行をファイルに保存してブラウザで開くと、黒い長方形の領域が表示されるため、これはキャンバスのサイズと同じサイズの長方形が描画されるまさにキャンバスです。
長方形
描画できる最も基本的な図は長方形です。 長方形を描くための3つの関数があります。
strokeRect(x, y, , ) // fillRect(x, y, , ) // clearRect(x, y, , ) //
これらの機能の操作を示す例：
<!doctype html> <html> <head> <title>rectExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.width = 640; example.height = 480; ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260); ctx.fillRect(20, 20, 256, 256); for (i = 0; i < 8; i += 2) for (j = 0; j < 8; j += 2) { ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32); ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32); } </script> </body> </html>
そして今、簡単な行ごとの解析：
10行目と11行目では、キャンバスのサイズを変更しました-思いついたイメージが完全に表示されるように、
12行目と13行目では、「チェスボード」の独特のフレームを象徴する2つの未完成の長方形を描きました。
14行目では、一辺が32ピクセルの64個の正方形に対応できるサイズの塗りつぶされた長方形を描画します。
行15〜19には、結果の画像がチェス盤のように見えるように、黒い長方形の正方形の領域をこの順序でクリアする2つのサイクルがあります。
線と円弧
線で構成される図形の描画は、いくつかの手順で順番に実行されます。
beginPath() closePath() stroke() fill()
beginPathは、図形の描画を記述する一連のアクションを「開始」するために使用されます。 このメソッドを呼び出すたびに、前のアクションのすべてのアクションがリセットされ、新しいアクションの「描画」が開始されます。
closePathはオプションのアクションであり、実際には、現在の位置から描画を開始した位置まで線を描画して、描画を終了しようとします。
最後のステップは、ストロークまたは塗りつぶしメソッドを呼び出すことです。 実際には、最初の図形は図形の周りに線を描画し、2番目の図形は図形を単色で塗りつぶします。
昔、基本的な486xの学校で家、フェンス、木を描いていた人たちは、先生の考えによると、彼はすぐに以下の部分を理解するでしょう。 だから、のようなメソッドがあります
moveTo(x, y) // "" x, y lineTo(x, y) // , arc(x, y, radius, startAngle, endAngle, anticlockwise) // , x y , ,
以下の例は、上記のすべての効果を示しています。
<!doctype html> <html> <head> <title>pathExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.beginPath(); ctx.arc(80, 100, 56, 3/4 * Math.PI, 1/4 * Math.PI, true); ctx.fill(); // *14 ctx.moveTo(40, 140); ctx.lineTo(20, 40); ctx.lineTo(60, 100); ctx.lineTo(80, 20); ctx.lineTo(100, 100); ctx.lineTo(140, 40); ctx.lineTo(120, 140); ctx.stroke(); // *22 </script> </body> </html>
14行目は円弧の色で塗りつぶされ、22行目はクラウンの輪郭を描きます。
バーンスタインベジエ曲線
ベジェ曲線とは何ですか、ウィキペディアはもっとよく説明すると思います。
3次ビジエ曲線と2次曲線をそれぞれ作成するために、2つの関数を使用できます。
quadraticCurveTo(Px, Py, x, y) bezierCurveTo(P1x, P1y, P2x, P2y, x, y)
xとyは移動する必要があるポイントであり、2次曲線の座標P（Px、Py）は、曲線の作成に使用される追加のポイントです。 3次曲線では、それぞれ2つの追加ポイント。
2つの曲線の例：
<!doctype html> <html> <head> <title>curveExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.beginPath(); ctx.moveTo(10, 15); ctx.bezierCurveTo(75, 55, 175, 20, 250, 15); ctx.moveTo(10, 15); ctx.quadraticCurveTo(100, 100, 250, 15); ctx.stroke(); </script> </body> </html>
色を追加する
画像が2色だけでなく、任意の色が提供される2つのプロパティ
fillStyle = color // strokeStyle = color // css,
色はcssとまったく同じに設定されます。たとえば、色を設定する4つの方法すべて
// ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)"
同様に、線の色が設定されます。
チェス盤の例を見て、それに小さな色を追加してください。
<!doctype html> <html> <head> <title>rectExample</title> <meta charset='utf-8' /> </head> <body> <canvas id='example'> </canvas> <script> var example = document.getElementById("example"), ctx = example.getContext('2d'); example.height = 480; example.width = 640; ctx.strokeStyle = '#B70A02'; // ctx.strokeRect(15, 15, 266, 266); ctx.strokeRect(18, 18, 260, 260); ctx.fillStyle = '#AF5200'; // ctx.fillRect(20, 20, 256, 256); for (i = 0; i < 8; i += 2) for (j = 0; j < 8; j += 2) { ctx.clearRect(20 + i * 32, 20 + j * 32, 32, 32); ctx.clearRect(20 + (i + 1) * 32, 20 + (j + 1) * 32, 32, 32); } </script> </body> </html>
挑戦する
情報を吸収し、実際に読んだものを統合するために、私は常に自分が読んだすべてを同時にカバーする大きな目標ではなく、それを達成するプロセスが自分にとって興味深いものになるように常に設定しました。 この場合、私のお気に入りの子供向けゲームの1つのレベルを描画しようとします。 実際には時間がないため-私はそれに生命を追加しませんが、今日ここで説明されているほとんどすべてをカバーする最も理解可能なコードを作成します。
私たちにTanchikiとして知られているBattleCityゲームのレベルの1つを再現しました。ドロップボックスが応答しない場合のペーストビンへのリンクです。
最後に、例に関するコメント。 Dandyが提供できる画像の仕様では、画面解像度は256×240ピクセルでなければなりません。
有名なタンチキサイズ13h13の大きなブロックの戦場。 それぞれが4つの繰り返しスプライトによって描画されます（一般的な計算によれば、26x26 = 676がマップに表示されます）。 それでは、元のピクセルにどのように表示され、どのように適切にスケーリングするかを考えてみましょう。 240を26で除算すると、除算の整数部分は8になります。テクスチャの次元は8x8ピクセルでした。 戦場のサイズは208x208で、大きなブロックは16x16です。 幅は256ピクセルにする必要があります。 次に、追加情報と上/下のフィールドのサイズを使用して、右側の列のサイズを計算します。 右側では、よく見ると、幅は2ブロックの次元で、合計2 * 16 = 32です。 既に32 + 208 = 240の左フィールド16と、それぞれ下と上に同じ16ピクセルがあります。 実際、私の例では、大きなブロックの次元は変数cellSizeに含まれています。実際、すべての計算はそのサイズに基づいて行われます。 値を実験して変更することができます.2つの累乗（16、32、64、128 ...）の倍数にすることを強くお勧めします。すべてを古き良きダンディのように見せたい場合は、値を16に設定します他の値はすべて正常に見えます。 私のような他の誰かが私の書き方が好きなら、私は続編を書きます、そうでなければ私はそれを隠します
次のシリーズをご覧ください： CANVAS Step by Step：Images