グラフィックスにHTML5キャンバスを使用する方法は？-H5 チュートリアル-php.cn

グラフィックスにHTML5キャンバスを使用する方法は？

James Robert Taylor

リリース： 2025-03-10 15:04:17

オリジナル

200 人が閲覧しました

グラフィックスにHTML5キャンバスを使用する方法

HTML5キャンバスを始めましょう

html5<canvas>要素は、Javascriptを使用してグラフィックを描く強力な方法を提供します。それを使用するには、最初にHTMLファイルに<canvas>要素を作成する必要があります。この要素は、図面の容器として機能します。その後、JavaScriptを使用してCanvasの2Dレンダリングコンテキストにアクセスします。これは、形状、テキスト、画像を描画するメソッドを提供します。

基本的な例は次のとおりです。

メソッドは、2Dレンダリングコンテキストを返します。これは、キャンバスに描画するために使用するオブジェクトです。

<!DOCTYPE html>
<html>
<head>
<title>HTML5 Canvas Example</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150"></canvas>
<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d'); // Get the 2D rendering context
  ctx.fillStyle = 'red'; // Set the fill style
  ctx.fillRect(10, 10, 50, 50); // Draw a filled rectangle
</script>
</body>
</html>

ログイン後にコピー

および

属性は重要です。それらをHTMLに直接設定することは、一般に、パフォーマンス上の理由で後でJavaScriptを介してそれらを操作するよりも好まれます。 getContext('2d')属性とwidth属性を指定しない場合、キャンバスはデフォルトで300x150ピクセルになります。図面コンテキストの形状と操作。最も基本的なもののいくつかは次のとおりです。heightwidth height

：

は満たされた長方形を描きます。エリア。

：

新しいパスを開始します。これは、複雑な形状を描画するために重要です。

：fillRect(x, y, width, height)描画カーソルを描画せずに新しい位置に移動します。円）。テキスト。
：strokeRect(x, y, width, height)キャンバスに画像を描画します。予期しない接続を避けるために、線とアークを描く前に、を使用して新しい形状を開始することを忘れないでください。また、
、、clearRect(x, y, width, height)などのプロパティを設定して、図面の外観をカスタマイズすることもできます。
html5キャンバスを使用してアニメーションを作成するにはどうすればよいですか？

キャンバスでアニメーション化され、requestAnimationFrame

requestAnimationFrame
HTML5キャンバスでアニメーションを作成します。この関数は、ブラウザの最適なリフレッシュレートでキャンバスの再描画を効率的にスケジュールし、スムーズなアニメーションをもたらします。基本的なアプローチには次のものが含まれます：

ゲーム状態の更新：各フレームで、アニメーションオブジェクトの位置、速度、またはその他のプロパティを更新します。シーン：すべての要素を更新されたプロパティで再描画します。 clearRect
次のフレームをスケジュールします：
次の再描画をスケジュールするために

ここに長方形をアニメーション化する簡単な例があります：アニメーションがブラウザのリフレッシュレートと同期し、requestAnimationFrameまたは
。

を使用するよりもスムーズで効率的にすることを保証します。キャンバス上のオブジェクト。最適化のためのベストプラクティス：

再描画を最小限に抑える：各フレームのキャンバス全体を再描画しないようにします。変更された部品のみを再描画します。

上記のように、requestAnimationFrame：
：この関数は効率的なアニメーションに重要です。たとえば、多くの小さな長方形を描画する代わりに、単一の大きな長方形を描画することを検討してください。
画像の読み込みを最適化します。
画像を非同期にロードして、アニメーションを開始する前にそれらを事前にキャッシュします。より良い圧縮とパフォーマンスのために適切な画像形式（WebPなど）を使用してください。
Canvasレイヤーを使用します。複雑なシーンでは、図面を別々のレイヤー（例えば、背景、前景、オブジェクト）に分解し、更新する必要があるレイヤーのみを再描画することを検討してください。これは、複数のキャンバースを使用してシミュレートできます。完了したら、オフスクリーンのキャンバスをメインキャンバスにレンダリングします。

不要な計算を避けます。
各フレームでそれらを再計算する代わりに可能な場合は、値を事前に計算します。オブジェクト。パフォーマンスの最適化は反復プロセスであることを忘れないでください。プロファイリングとテストは、特定のボトルネックを見つけて対処するための鍵です。