HTML5 キャンバス メソッドの使用ガイド_html5 チュートリアルのスキル

キャンバスメソッド

save() は現在の環境の状態を保存します

restore() は、以前に保存されたパスのステータスと属性を返します

createEvent()

getContext() は、描画関数にアクセスするために必要な API を示すオブジェクトを返します

toDataUPL() はキャンバス画像の URL を返します

線スタイルのプロパティとメソッド

属性:

lineCap は線の終点スタイルを設定または返します

lineJoin は、2 つの線が交差するときに作成されるコーナーのタイプを設定または返します

lineWidth は、現在の行の幅を設定または返します。

miterLimit は最大マイター長を設定または返します

色、スタイル、シャドウのプロパティとメソッド

属性

fillStyle は、絵画の塗りつぶしに使用される色、グラデーション、またはパターンを設定または返します

ストロークスタイルは、ストロークに使用される色、グラデーション、またはパターンを設定または返します

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

shadowBlur はシャドウに使用されるブラー レベルを設定または返します

shadowOffsetX は、形状からの影の水平距離を設定または返します

shadowOffsetY は、形状からの影の垂直距離を設定または返します

メソッド

createLinearGradient() は線形グラデーションを作成します (キャンバス コンテンツで使用されます)

createPattern() は、指定された要素を指定された方向に繰り返します

createRadialGradient() は放射状/円形のグラデーションを作成します (キャンバス コンテンツで使用されます)

addColorStop() は、グラデーション オブジェクトの色または停止位置を指定します

パスメソッド

fill() は現在の図面 (パス) を塗りつぶします

ストローク() は定義されたパスを描画します

beginPath() はパスを開始するか、現在のパスをリセットします

moveTo() は、線を作成せずにパスをキャンバス内の指定された点に移動します

closePath() は、現在の点から開始点に戻るパスを作成します

lineTo() は新しい点を追加し、その点から最後に指定された点までの線を作成します

clip() は、元のキャンバスから任意の形状とサイズの領域を切り取ります

quadraticCurveTo() は 2 番目のベジェ曲線を作成します

bezierCureTo() はサブスクエア ベジェ曲線を作成します

arc() は円弧/曲線を作成します (円または部分円の作成に使用されます)

arcTo() は 2 つの接線の間に円弧/曲線を作成します

isPointInPath() は、指定された点が現在のパス内にある場合にブール値を返します

長方形

Rect() は長方形を作成します

fillRect() は「塗りつぶされた」四角形を描画します

ストロークRect()は長方形を描画します(塗りつぶしなし)

clearRect() は、指定された四角形内の指定されたピクセルをクリアします

テキストのプロパティとメソッドを設定します

属性:

font テキストコンテンツの現在のフォント属性を設定または返します

textAlign は、テキスト コンテンツの現在の配置を設定または返します

textBaseline 設定は、テキストを描画するときに使用される現在のテキスト ベースラインを返します。

メソッド:

fillText() はキャンバス上に「塗りつぶされた」テキストを描画します

ストロークText()はキャンバス上にテキストを描画します(パディングなし)

measureText() は、指定されたテキスト幅を含むオブジェクトを返します

変換方法

scale() は、現在の図面をより大きいサイズまたはより小さいサイズに拡大縮小します

rotate() は現在の図面を回転します

translation() は花柄シャツの (0,0) 位置を再マップします

transform() は図面の現在の変換行列を置き換えます

setTransform() は現在の変換を単位行列にリセットします。次に、transform()

を実行します。