JavaScriptのキャンバスメソッドとは何ですか?-フロントエンドQ&A-php.cn

JavaScriptのキャンバスメソッドとは何ですか?

青灯夜游

リリース： 2023-01-07 11:44:15

オリジナル

2440 人が閲覧しました

JavaScript のキャンバスメソッドには、createLinearGradient()、createPattern()、rect()、fillRect()、fill()、stroke()、clip()、arc()、arcTo() などが含まれます。

JavaScriptのキャンバスメソッドとは何ですか?

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

ただし、

getContext() メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。

javascript キャンバスメソッド

色、スタイル、シャドウ

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

#長方形

##メソッド長方形を作成します。「塗りつぶされた」長方形を描画します。長方形を描画します(塗りつぶしなし)。指定された四角形内の指定されたピクセルをクリアします。 #パス

説明	##rect()
	fillRect()
	ストロークRect()
	clearRect()

メソッド

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













	#変換

##メソッド説明

scale()rotate()translate()transform()setTransform()#テキスト##メソッド

現在の図面を拡大または縮小してサイズを変更します。
現在の図面を回転します。
キャンバス上の (0,0) 位置を再マップします。
図面の現在の変換行列を置き換えます。
現在の変換を単位行列にリセットします。次に、transform() を実行します。

説明

fillText()

キャンバス上に「塗りつぶされた」テキストを描画します。ストロークText()キャンバス上にテキスト(パディングなし)を描画します。 measureText()指定されたテキスト幅を含むオブジェクトを返します。 ##方法説明



	#画像描画

drawImage()画像、キャンバス、またはビデオをキャンバスに描画します。

#ピクセル操作

##メソッド##createImageData()新しい空の ImageData オブジェクトを作成します。 getImageData()キャンバス上の指定された四角形のピクセルデータをコピーする ImageData オブジェクトを返します。 putImageData()画像データ (指定された ImageData オブジェクトから) をキャンバスに戻します。 #その他