Canvas レンダリング コンテキストを使用した Web 上での描画

ブラウザで 2D 描画アプリを作成するにはどうすればよいですか?

HTML キャンバス要素と CanvasRenderingContext2D インターフェイスを組み合わせると、Web 上にグラフィックを描画する簡単な方法が提供されます。

注: Web 上で描画するための 2 つの代替オプションは、WebGL と SVG です。

CanvasRenderingContext2D

CanvasRenderingContext2D インターフェイスは、キャンバス要素の描画面に 2D レンダリング コンテキストを提供します。キャンバス上に図形、テキスト、画像、その他のオブジェクトを描画するために使用されます。

これは、SVG が使用するベクター グラフィックスとは対照的に、ラスター グラフィックスです。ラスター グラフィックスはピクセルで構成され、ベクター グラフィックスはパスで構成されます。ラスターはありません
拡大縮小やベクター グラフィックスも可能です。

使用例

2D キャンバスの一般的な使用例には次のようなものがあります。

• 写真編集
• 描画/スケッチアプリ
• シンプルなゲーム

サンプルアプリ

この例には、いくつかの簡単な要件があります。

• ユーザーはキャンバス上に線を描くことができます
• ユーザーは背景を設定できます
• ユーザーは、EyeDropper カラーピッカーとデフォルトで提供されるカラーパレットから背景と線の色を選択できます
• ユーザーはキャンバスをクリアできます
• ユーザーは元に戻す/やり直すことができます
• ユーザーは図面を画像としてダウンロードできます
• ユーザーはホットキーを使用して上記のすべてを実行できます

コードサンドボックス.io

機能のアイデア

次のような機能を追加することで、この例をさらに進めることができます。

ペンのカスタマイズ: ユーザーがペンのサイズとブラシ ストロークをカスタマイズできるようにするフォーム。

イメージの状態を永続ストアに保存: イメージの状態は現在コンポーネントの状態に保存されています。イメージの状態をローカル ストレージやデータベースなどの永続ストアに保存できます。

テキストの追加: ユーザーがキャンバスにテキストを追加できるようにする新しいアクション ボタンを追加します。 CanvasRenderingContext2D インターフェイスは、
を提供します。 キャンバス上にテキストを描画するための stopText メソッドと fillText メソッド。

画像の追加: ユーザーは画像をキャンバスにアップロードできます。 CanvasRenderingContext2D インターフェイスは、キャンバス上に画像を描画するためのdrawImage メソッドを提供します。これにより、アプリに多くの可能性が開かれる可能性があります。

レイヤー システムの追加: ユーザーが複数のレイヤーをキャンバスに追加できるようにします。これにより、ユーザーはさまざまなレイヤーに描画し、各レイヤーの表示/非表示を切り替えることができます。これは実装がより複雑な機能になりますが、ユーザーに大きな柔軟性を提供します。

領域を塗りつぶす: ユーザーが領域を色で塗りつぶせるようにする新しいアクション ボタンを追加します。 CanvasRenderingContext2D インターフェイスは、現在の塗りつぶしスタイルで領域を塗りつぶすための fill メソッドを提供します。

最終的な考え

WebGL と SVG は、Web 上で描画するための他の 2 つの興味深いオプションであり、検討する価値があることを再度言及する価値があります。

CanvasRenderingContext2D インターフェイスの MDN ドキュメントは、2D キャンバスについて詳しく学ぶための優れたリソースです。

この例を参考にして実行してください。ウェブ上には、面白くてインタラクティブな描画アプリを作成する可能性がたくさんあります。

以上がCanvas レンダリング コンテキストを使用した Web 上での描画の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。