ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptのキャンバスメソッドとは何ですか?

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

青灯夜游
青灯夜游オリジナル
2021-07-19 17:25:522439ブラウズ

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

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

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

タグは、(スクリプト、通常は JavaScript を介して) 画像を描画するために使用されます。

ただし、 要素自体には描画機能はありません (グラフィックスのコンテナーにすぎません)。実際の描画タスクを実行するにはスクリプトを使用する必要があります。

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 オブジェクトから) をキャンバスに戻します。 #その他
説明

##方法

説明save()現在の環境の状態を保存します。 restore()以前に保存したパスのステータスと属性を返します。 ##getContext()#toDataURL()[推奨学習: ]
#createEvent()
JavaScript 上級チュートリアル

以上がJavaScriptのキャンバスメソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。