この記事では、主にHTML5のCanvasメソッドを使用するためのガイドを紹介します。とてもシンプルで明確です。とても良い記事です。ここでお勧めします。
キャンバスメソッド
save()現在の環境のステータスを保存します
restore()以前に保存されたパスステータスとプロパティを返します
createevent()
getContext()図面関数にアクセスするために必要なAPIを示すオブジェクトを返します
todataupl()は、キャンバス画像のURLを返します
ラインスタイルのプロパティと方法
財産:
LineCapは、行のエンドエンドポイントスタイルを設定または返します
LineJoinは、2行が交差するときに作成されたコーナータイプを設定または返します。
LineWidthは、現在の行の幅を設定または返します。
MiterLimitは、最大マイターの長さを設定または返します
色、スタイル、影の特性と方法
財産
塗料を埋めるために使用される色、グラデーション、またはモードを塗りつぶすまたは返します
ストロークに使用される色、グラデーション、またはモードをセットまたは返してください
シャドウコラーセットまたはシャドウに使用される色を返します
Shadowblurは影に使用されるぼやけレベルを設定または返します
Shadowoffsetxは、影の水平距離を形状に設定または返します
ShadowOffsetyは、影の垂直距離を形状に設定または返します
方法
CreateLinearGradient()は線形勾配を作成します(キャンバスコンテンツで使用)
createpattern()は、指定された方向に指定された要素を繰り返します
CREATERADIALGRADIENT()Radial/Ring Gradients(Canvasコンテンツで使用)を作成します
addColorStop()勾配オブジェクトの色または停止位置を指定します
パスメソッド
fill()は現在の図面(パス)を入力します
stroke()は、定義されたパスを描画します
beginpath()はパスを開始するか、現在のパスをリセットします
moveto()は、行を作成せずにキャンバスの指定されたポイントへのパスを移動します
closepath()は、現在のポイントから出発点までのパスを作成します
lineto()は、新しいポイントを追加して、そのポイントから最後の指定されたポイントまでの行を作成します
Clip()は、元のキャンバスから任意の形状とサイズの領域をカットします
QuadraticCurveto()は、2番目のベジエ曲線を作成します
beziercureto()は、最後のbezier曲線を作成します
arc()ARC/曲線を作成します(円または部分円を作成するために使用)
arcto()は、2つの接線の間にARC/曲線を作成します
ispointInpath()指定されたポイントが現在のパスにある場合、ブール値を返します
矩形
rect()は長方形を作成します
fillrect()は、塗りつぶされた長方形を描画します
strokerect()描画長方形(塗りつぶしなし)
ClearRect()は、指定された長方形内で指定されたピクセルをクリアします
テキストプロパティとメソッドを設定します
財産:
フォントは、テキストコンテンツの現在のフォントプロパティを設定または返します
TextAlignセットまたはテキストコンテンツの現在のアライメントを返します
TextBaseLineの設定は、テキストを描画するときに使用されている現在のテキストベースラインを返します。
方法:
filltext()は、キャンバスに塗りつぶされたテキストを描画します
stroketext()はキャンバスにテキストを描画します(塗りつぶしなし)
測定テキスト()指定されたテキスト幅を含むオブジェクトを返します
変換方法
スケール()現在のプロットを大きくまたは小さくスケーリングします
ROTATE()は現在の図面を回転させます
翻訳()フローラルシャツの(0,0)位置を再確認します
transform()図面の現在の変換マトリックスを置き換えます
SetTransform()は、ユニットマトリックスへの現在の変換をリセットします。その後、transform()を実行します