ホームページ ウェブフロントエンド H5 チュートリアル HTML5 キャンバスの基本描画: 長方形の描画

HTML5 キャンバスの基本描画: 長方形の描画

May 21, 2017 pm 02:40 PM
canvas html5 矩形 描画

は、グラフィックを描画するために使用される HTML5 の新しいタグです。この記事では主に HTML5 のキャンバスの基本的な描画方法を詳しく紹介します。興味のある方は参考にしてください。 ;canvas>

は、id、class、style などの属性に加えて、高さと幅の属性もあります。 > 要素に描画するには、次の 3 つの主な手順があります:

1. Canvas オブジェクトである DOM オブジェクトを取得します。 Canvas オブジェクトを呼び出して CanvasRenderingContext2D オブジェクトを取得します。 3. 描画する CanvasRenderingContext2D オブジェクトを呼び出します。


長方形rect()、fillRect()、ストロークRect()を描画します

•context.rect( x , y , width , height ): 長方形のパスのみを定義します •context.fillRect( x , y )。 , width , height ): 塗りつぶされた四角形を直接描画します。 •context.ストロークRect( x , y , width , height ): 四角形の境界線を直接描画します



コンテンツをクリップボードにコピーします

) の場合、ストロークの境界線が大きい場合、2 番目の点で描画される境界線の半分が明らかにカバーされます。ストロークスタイル属性には、「rgba(255,0,0,0.2 )」設定メソッドを渡すことができます。この設定の最後のパラメータは透明度です。

  • 長方形の描画に関連するものはもう 1 つあります: 長方形領域のクリア: context.clearRect(x,y,width,height)。

    受け取ったパラメータは次のとおりです: 長方形の開始位置と長方形の幅と長さをクリアします。
  • 上記のコードで、描画グラフィックスの最後に
  • context.clearRect(100,60,600,100);
  • を追加すると、次の効果が得られます:

  • 以上がHTML5 キャンバスの基本描画: 長方形の描画の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    このウェブサイトの声明
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

    ホットAIツール

    Undresser.AI Undress

    Undresser.AI Undress

    リアルなヌード写真を作成する AI 搭載アプリ

    AI Clothes Remover

    AI Clothes Remover

    写真から衣服を削除するオンライン AI ツール。

    Undress AI Tool

    Undress AI Tool

    脱衣画像を無料で

    Clothoff.io

    Clothoff.io

    AI衣類リムーバー

    Video Face Swap

    Video Face Swap

    完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

    ホットツール

    メモ帳++7.3.1

    メモ帳++7.3.1

    使いやすく無料のコードエディター

    SublimeText3 中国語版

    SublimeText3 中国語版

    中国語版、とても使いやすい

    ゼンドスタジオ 13.0.1

    ゼンドスタジオ 13.0.1

    強力な PHP 統合開発環境

    ドリームウィーバー CS6

    ドリームウィーバー CS6

    ビジュアル Web 開発ツール

    SublimeText3 Mac版

    SublimeText3 Mac版

    神レベルのコード編集ソフト(SublimeText3)

    HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

    HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

    HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

    これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

    HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

    HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

    HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

    HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

    HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

    HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

    HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

    HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

    HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

    HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

    HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

    HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

    See all articles