HTML5キャンバスの詳細説明(2)

前回の記事では、canvas タグの簡単な紹介と使用例を紹介しましたが、実際には、canvas の使用法は非常に強力で、多くのクールな HTML5アニメーションやゲームが Canvas に基づいて作成されています。そこで、Canvas の基礎を固めるために、Canvas 関連のブログ記事を 2 つ書き続けることにしました。
この記事では、キャンバスに関連するプロパティや使い方を主に紹介します。

色、スタイル、シェーディング

プロパティ	説明
fillStyle	絵画の塗りつぶしに使用される色、グラデーション、またはパターンを設定または返します
ストロークスタイル	を設定または返しますペイントの塗りつぶしに使用される色 ストロークの色、グラデーション、またはパターン
shadowColor	影に使用される色を設定または返します
shadowBlur	影に使用されるぼかしレベルを設定または返します
shadowOffsetX	影の距離を設定または返します シェイプの水平距離を設定または返します
shadowOffsetY	シェイプからの影の垂直距離を設定または返します

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

線のスタイル

プロパティ	説明
lineCap	設定または線の終端スタイルを返します
lineJoin	2本の線が交差するときに作成される角のタイプを設定または返します
lineWidth	現在の線の幅を設定または返します
miterLimit	設定または戻り最大留め継ぎ長さ

Rectangle

メソッド	説明
rect()	長方形を作成する
fillRect ()	「塗りつぶされた」長方形を描画します
ストロークRect()	四角形を描画(塗りつぶしなし)
ClearRect()	指定された四角形内の指定されたピクセルをクリアします

パス

説明fill() 現在の図面を塗りつぶします(パス)ストローク()定義されたパスを描画しますbeginPath()パスを開始するか、現在のパスをリセットしますmoveTo( )パスをキャンバスに移動します で点を指定します。線は作成しませんclosePath()現在点から始点に戻るパスを作成しますlineTo()Add新しい点を作成し、その点からキャンバスの開始点までのパスを作成します 最後に指定した点で線を描きますclip() 元のキャンバスから任意の形状とサイズの領域を切り取りますquadraticCurveTo()2次ベジェ曲線を作成しますbezierCurveTo()3次ベジェ曲線を作成しますarc()円弧/曲線を作成します(円または部分を作成するため)サークル)arcTo() 2 つの接線の間に円弧/曲線を作成しますisPointInPath() 指定された点が現在のパス内にある場合は true を返し、それ以外の場合は false を返します ズーム 現在の図面をより大きい値に回転します。小さいサイズ

メソッド

rotate()

現在の図面を回転translate()キャンバス上の(0,0)位置を再マップtransform()プロットの現在の変換行列を置き換えるsetTransform()現在の変換を単位行列にリセットします。次に、transform() を実行します プロパティ description font テキストコンテンツの現在のフォントプロパティを設定または返します

text

text整列

設定または戻るテキストコンテンツ textBaseline の現在の配置 テキストを描画するときに使用される現在のテキストベースラインを設定または返します fillText()キャンバス上に「塗りつぶされた」テキストを描画しますストロークText()キャンバス上にテキストを描画します(塗りつぶしなし)メジャーテキスト（）は、指定されたテキスト幅widthimagedrawingmethod

メソッド	説明

description

ピクセル操作プロパティ説明

drawimage（）を含むオブジェクトを再実行します。

widthImageDataオブジェクトの幅を返す高さ画像を返すデータオブジェクトの高さ dataは、指定されたImageDataオブジェクトの画像データを含むオブジェクトを返しますメソッド説明 createImageData()新しい空のImageDataオブジェクトを作成しますgetImageData( )キャンバス上の指定された四角形のピクセルデータをコピーする ImageData オブジェクトを返しますputImageData() (指定された ImageData オブジェクトからの) 画像データをキャンバスに戻しますプロパティ説明

	画像合成

globalAlpha図面の現在のアルファまたは透明度の値を設定または返しますglobalCompositeOperation新しい画像を描画する方法を設定または返します既存の画像メソッド説明

	その他のメソッド

save()現在の環境の状態を保存restore()以前に保存したパスの状態と属性を返しますcreateEvent()キャンバスの描画に使用するオブジェクトを取得キャンバス要素に描画された画像をエクスポート

	getContext()
	toDataURL()
	次のセクションでは例を使用して、各属性とメソッドの具体的な使用法を説明します。

以上がHTML5キャンバスの詳細説明(2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。