ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptのキャンバスメソッドとは何ですか?
JavaScript のキャンバス メソッドには、createLinearGradient()、createPattern()、rect()、fillRect()、fill()、stroke()、clip()、arc()、arcTo() などが含まれます。
このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。
ただし、
getContext() メソッドは、キャンバス上に描画するためのメソッドとプロパティを提供するオブジェクトを返します。
色、スタイル、シャドウ
メソッド | 説明 |
---|---|
createLinearGradient() | 線形グラデーションを作成します (キャンバス コンテンツで使用するため)。 |
createPattern() | 指定された要素を指定された方向に繰り返します。 |
createRadialGradient() | 放射状/円形グラデーションを作成します (キャンバス コンテンツで使用されます)。 |
addColorStop() | グラデーション オブジェクトの色と停止位置を指定します。 |
#長方形
説明 | ##rect() |
---|---|
fillRect() | |
ストロークRect() | |
clearRect() | |
#パス |
メソッド
fill() | 現在の図面 (パス) を塗りつぶします。 |
---|---|
ストローク() | 定義されたパスを描画します。 |
beginPath() | パスを開始するか、現在のパスをリセットします。 |
moveTo() | 線を作成せずに、パスをキャンバス内の指定された点に移動します。 |
closePath() | 現在の点から開始点に戻るパスを作成します。 |
lineTo() | 新しい点を追加し、その点から最後に指定した点までキャンバス内に線を作成します。 |
clip() | 元のキャンバスから任意の形状とサイズの領域をクリップします。 |
quadraticCurveTo() | 二次ベジェ曲線を作成します。 |
bezierCurveTo() | 3次ベジェ曲線を作成します。 |
arc() | 円弧/曲線を作成します (円または部分円の作成に使用されます)。 |
arcTo() | 2 つの接線の間に円弧/曲線を作成します。 |
isPointInPath() | 指定されたポイントが現在のパス内にある場合は true、それ以外の場合は false を返します。 |
#変換 |
##メソッド説明
現在の図面を拡大または縮小してサイズを変更します。 | |
---|---|
現在の図面を回転します。 | |
キャンバス上の (0,0) 位置を再マップします。 | |
図面の現在の変換行列を置き換えます。 | |
現在の変換を単位行列にリセットします。次に、transform() を実行します。 | |
fillText()
ストロークText() | キャンバス上にテキスト(パディングなし)を描画します。 |
---|---|
measureText() | 指定されたテキスト幅を含むオブジェクトを返します。 |
#画像描画 | |
##方法 | 説明 |
drawImage()画像、キャンバス、またはビデオをキャンバスに描画します。
説明 | ##createImageData() |
---|---|
getImageData() | |
putImageData() | |
##方法
save() | 現在の環境の状態を保存します。 |
---|---|
restore() | 以前に保存したパスのステータスと属性を返します。 |
#createEvent() | |
JavaScript 上級チュートリアル | ]
以上がJavaScriptのキャンバスメソッドとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。