html5 入門 information_html/css_WEB-ITnose

1. Canvas

1) 概要: HTML5 タグは、(スクリプト経由、通常は JavaScript 経由で) 使用されます。ただし、 要素自体には描画機能がありません (グラフィックスのコンテナーにすぎません)。実際の描画を行うにはスクリプトを使用する必要があります。 getContext() メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。
2)

プロパティの説明 シェイプからの影の水平距離を設定または返します shadowOffset Y シェイプからの影の垂直距離を設定または返します

fillStyle	塗りつぶしペイントに使用される色、グラデーション、またはパターンを設定または返します
ストロークスタイル	ストロークに使用される色、グラデーション、またはパターンを設定または返します
shadowColor	影に使用される色を設定または返します
shadowBlur	影に使用されるぼかしレベルを設定または返します
shadowOffsetX

メソッドの説明 createLinearGradient() 線形グラデーションを作成します (キャンバス コンテンツで使用されます) createPattern ()指定した方向に繰り返す 要素 createRadialGradient() 放射状/円形グラデーションを作成 (キャンバス コンテンツで使用) addColorStop() グラデーション オブジェクトで色と停止位置を指定

Canvas 要素 画像を描画するときは 2 つのメソッドがあります:

context.fill()//Fill

context.steroid()// 境界線を描画

style: グラフィックを描画する前に、描画スタイルを設定する必要があります

context.fillStyle//塗りつぶしスタイル

context.drawingStyle//境界線スタイル

context.lineWidth//グラフィック境界線の幅

shadowOffsetX プロパティは、図形と影の間の水平距離を設定または返します。

shadowOffsetX=0 は、影がシェイプの真下にあることを示します。

shadowOffsetX=20 は、影が図形の左側の位置から 20 ピクセル右に位置することを示します。

shadowOffsetX=-20 は、影が図形の左位置から 20 ピクセル左に位置することを示します。