HTML5キャンバス基本描画描画影効果

は HTML5 の新しいタグで、主に HTML5 キャンバスの基本的な描画方法を詳しく紹介します。 ;canvas>

は、グラフィックを描画するために使用される HTML5 の新しいタグです。実際、このタグの特徴は、このタグが CanvasRenderingContext2D オブジェクトを取得できることです。 JavaScript スクリプトを介して描画するためのオブジェクト。

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

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

影の描画
:

shadowColor 影に使用される色を設定または返します。

• shadowBlur 影に使用されるぼかしレベルを設定または返します (値が大きいほどぼやけます)。

• shadowOffsetX 影とシェイプの間の水平距離を設定または返します。

• shadowOffsetY 影と形状の間の垂直距離を設定または返します。

• shadowは、「canvas "）; .beginPath();

// 頂点の座標、およびパスは頂点に基づいて定式化されます

for (var i = 0; i

1. context.lineTo(Math.cos((18+i*72)/180*Math.PI)* 200+200, at -math.sin ((18+i*72) /180**math .pi*200+200);

   context.lineto (math.cos ((54+i*i* 72)/180*Math.PI)*80+200,

2. context.closePa th() ;

   //境界線のスタイルと塗りつぶしの色を設定します

3. context.lineWidth=
"3"

4. context .fillStyle = "#F6F152"

   ;

5. コンテキスト.ストロークスタイル = "#F5270B"

   context.shadowColor =
"#F7F2B4"
6. コンテキスト .shadowOffsetX = 30;

   context.shadowBlur = 2 ;

7. context.fill();

8. 効果は次のとおりです。

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