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 サイトの他の関連記事を参照してください。