HTML5 Canvas タグはグラフやその他の画像などのグラフィックを定義します。グラフィックを描画するにはスクリプトを使用する必要があります。 キャンバス上に赤い四角形、グラデーションの四角形、色付きの四角形、およびいくつかの色付きのテキストを描画します。 Canvas とは何ですか? HTML5 要素は、スクリプト (通常は JavaScript) を通じて行われます。スクリプトを使用してグラフィックを描画します。 Canva を使用すると、さまざまな方法でパス、ボックス、円、文字を描画したり、画像を追加したりできます。 ブラウザのサポート Internet Explorer 9 以降、Firefox、Opera、Chrome、Safari は 要素をサポートします。 注: Internet Explorer 8 以前のバージョンは 要素をサポートしません。キャンバスを作成します キャンバスは、 要素によって描画される、Web ページ内の長方形のボックスです。デフォルトでは、 要素には境界線とコンテンツがありません。 簡単な例は次のとおりです:ログイン後にコピー注: 通常、タグでは id 属性 (スクリプトでよく参照される) を指定する必要があり、幅と高さの属性はキャンバスのサイズを定義します。 ヒント: HTML ページで使用します。 複数の 要素。 style 属性を使用して境界線を追加します。 例 ログイン後にコピー JavaScript を使用して画像を描画します Canvas 要素自体には 描画 機能がありません。すべての描画作業は JavaScript 内で行う必要があります: Instance var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75); ログイン後にコピー インスタンス分析: まず、 要素を見つけます:var c=document.getElementById("myCanvas");ログイン後にコピー 次に、コンテキスト object:var ctx=c.getContext("2d");ログイン後にコピーgetContext("2d") を作成します) オブジェクトは、パス、四角形、円、文字を描画したり、画像を追加したりするためのさまざまなメソッドを備えた組み込みの HTML5 オブジェクトです。 次の 2 行のコードは、赤い四角形を描画します: ctx.fillStyle="#FF0000"; ctx.fillRect(0,0,150,75);ログイン後にコピー CSS カラー、グラデーション、またはパターンを使用できる fillStyle プロパティを設定します。 fillStyle のデフォルト設定は #000000 (黒) です。 fillRect(x,y,width,height) メソッドは、四角形の現在の塗りつぶし方法を定義します。 キャンバス座標キャンバスは2次元グリッドです。 キャンバスの左上隅の座標は(0,0)です上記のfillRectメソッドにはパラメータ(0,0,150,75)があります。 意味: キャンバス上に左上隅 (0,0) から開始して 150x75 の長方形を描画します。 【関連推奨事項】 1. 特別な推奨事項 : 「php Programmer Toolbox」V0.1 バージョンのダウンロード2. 無料の h5 オンラインビデオチュートリアル3. cn オリジナル html5 ビデオチュートリアル
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
