Canvas テクノロジの概要
概要
Canvas は HTML5 の新機能で、グラフィック、アニメーション、ゲームの描画に使用できる Canvas 要素です。 、など。画像や Flash を使用して同じ効果を実現する場合と比較して、Canvas はパフォーマンスが高く、消費するリソースが少なくなります。
基本的な使い方
Canvas 要素はデフォルトでは透明ですが、CSS スタイルを設定することで幅と高さを指定することも、JavaScript を使用して動的に設定することもできます。次に、getContext メソッドを使用してキャンバス コンテキスト オブジェクトを取得します。これにより、さまざまな描画操作を実行できます。
図形の描画
Canvas を使用して、長方形、円、直線、円弧などのさまざまな図形を描画できます。以下にサンプル コードをいくつか示します。
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(20, 20, 100, 50);
このコードは、開始点を (20, 20) として、キャンバス上に赤い四角形を描画します。幅は100、高さは50です。
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.arc(100, 100, 50, 0, 2 * Math.PI); ctx.fillStyle = "blue"; ctx.fill();
このコードは、中心座標が (100, 100)、半径が 50 の青い円をキャンバス上に描画します。
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.beginPath(); ctx.moveTo(20, 20); ctx.lineTo(100, 100); ctx.strokeStyle = "black"; ctx.lineWidth = 2; ctx.stroke();
このコードは、開始点が (20, 20)、終了点が (20, 20) である黒い直線をキャンバス上に描画します。 (100, 100) 線幅は 2 です。
テキストの描画
Canvas は、図形の描画に加えて、テキストの描画にも使用できます。 fillText メソッドを使用して実線のテキストを描画し、ストロークText メソッドを使用して中空のテキストを描画できます。以下はサンプル コードです:
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "black"; ctx.font = "24px serif"; ctx.fillText("Hello, Canvas!", 50, 50);
このコードは、「Hello, Canvas!」という内容の黒塗りのテキストをキャンバス上に描画します。開始点は (50, 50) です。
アニメーション効果
Canvas では静的なグラフィックを描画できるだけでなく、さまざまなアニメーション効果を実現できます。アニメーション効果は、requestAnimationFrame 関数を使用して各フレーム間にキャンバスを再描画することで実現できます。簡単なサンプル コードを次に示します。
var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var x = 0; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillRect(x, 20, 100, 50); x += 1; requestAnimationFrame(draw); } requestAnimationFrame(draw);
このコードは、キャンバス上に描画された移動する四角形をアニメーション化します。各フレームが開始される前に、キャンバスをクリアし、赤い四角形を描画し、x 座標に 1 を加えて、アニメーションの次のフレームを要求します。
概要
キャンバス テクノロジは、HTML5 の非常に強力で柔軟な描画ツールであり、これを使用してさまざまなグラフィックス、アニメーション、ゲーム効果を実現できます。この記事では、図形の描画、テキストの描画、アニメーション効果の実現など、Canvas の基本的な使い方を簡単に紹介します。読者がこの記事を通じて Canvas テクノロジーについて予備的に理解し、さらに学習して応用できるようになれば幸いです。
以上がCanvas テクノロジーの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。