HTML5キャンバス基本描画で四角形を描画するサンプルコードを詳しく解説

<canvas> は HTML5 の新しい タグで、主に HTML5 キャンバスで四角形を描画する基本的な drawing 方法を詳しく紹介します。友達は

を参照できます。これは、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 ): 四角形の境界線を直接描画します

JavaScript Code复制内容到剪贴板
<script type="text/javascript">   
    var canvas = document.getElementById("canvas");   
    var context = canvas.getContext("2d");   
  
    //使用rect方法   
    context.rect(10,10,190,190);   
    context.lineWidth = 2;   
    context.fillStyle = "#3EE4CB";   
    context.strokeStyle = "#F5270B";   
    context.fill();   
    context.stroke();   
  
    //使用fillRect方法   
    context.fillStyle = "#1424DE";   
    context.fillRect(210,10,190,190);   
  
    //使用strokeRect方法   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(410,10,190,190);   
  
    //同时使用strokeRect方法和fillRect方法   
    context.fillStyle = "#1424DE";   
    context.strokeStyle = "#F5270B";   
    context.strokeRect(610,10,190,190);   
    context.fillRect(610,10,190,190);   
</script>

ここで 2 つの点について説明する必要があります。ポイントは、ストローク () と fill() の描画シーケンスです。fill() が後で描画される場合、ストロークの境界線が大きくなると、明らかにストローク() で描画された境界線の半分がカバーされます。 2 番目のポイント: fillStyle または stopStyle を設定します。属性の場合、「rgba(255,0,0,0.2)」設定メソッドで設定できます。この設定の最後のパラメータは透明度です。
長方形の描画に関連するものはもう 1 つあります: 長方形領域のクリア: context.

clear

Rect(x,y,width,height)。

受け取ったパラメータは次のとおりです: 長方形の開始位置と長方形の幅と長さをクリアします。

上記のコードで、描画グラフィックスの最後に
context.clearRect(100,60,600,100);

を追加すると、次の効果が得られます:

以上がHTML5キャンバス基本描画で四角形を描画するサンプルコードを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。