HTML Canvas リファレンスマニュアル

HTML Canvas リファレンスマニュアル

HTML <canvas> タグは、スクリプト（通常はJavaScript）を使用して動的にグラフィックを描画するために使用されます。

HTML Canvasに関する詳細情報を知りたい場合は、私たちのHTML Canvasトレーニングを読んでください。

色、スタイルと影

属性 説明
fillStyle 塗りつぶしの色、グラデーションまたはパターンを設定または返します
strokeStyle 線の色、グラデーションまたはパターンを設定または返します
shadowColor 影の色を設定または返します
shadowBlur 影のぼかしレベルを設定または返します
shadowOffsetX 影が形状から水平に離れる距離を設定または返します
shadowOffsetY 影が形状から垂直に離れる距離を設定または返します
メソッド 説明
createLinearGradient() 線形グラデーションを作成します（キャンバスの内容に使用）
createPattern() 指定された方向で指定された要素を繰り返します
createRadialGradient() 放射状/環形的なグラデーションを作成します（キャンバスの内容に使用）
addColorStop() グラデーションオブジェクト内の色と停止位置を指定します

線のスタイル

属性 説明
lineCap 線の終端のスタイルを設定または返します
lineJoin 線が交差する場合に作成される角の種類を設定または返します
lineWidth 現在の線の幅を設定または返します
miterLimit 最大斜接長さを設定または返します

矩形

メソッド 説明
rect() 矩形を作成します
fillRect() 塗りつぶされた矩形を描きます
strokeRect() 塗りつぶしない矩形を描きます
clearRect() 指定されたピクセルを矩形内からクリアします

経路

メソッド 説明
fill() 現在の描画（経路）を塗ります
stroke() 定義された経路を描きます
beginPath() 新しい経路を開始するか、現在の経路をリセットします
moveTo() 経路をキャンバスの指定されたポイントに移動させますが、線を生成しません
closePath() 現在の点から始まる経路を閉じます
lineTo() 新しい点を追加し、キャンバスでその点から最終指定点までの線を描きます
clip() 元のキャンバスから任意の形状とサイズの領域を切り取ります
quadraticCurveTo() 创建二次贝塞尔曲线
quadraticCurveTo() 二次ベ塞尔曲線を作成します
bezierCurveTo() 三次方ベ塞尔曲線を作成します
arc() 円または円の一部を作成するための弧/曲線を作成します
arcTo() 二つの切線間の弧/曲線を作成します

isPointInPath()

メソッド 説明
指定されたポイントが現在のパスに位置する場合、trueを返し、そうでない場合、falseを返します 変換
scale() 現在の描画を大きくまたは小さくスケールします
rotate() 現在の描画を回転します
translate() キャンバス上の（0,0）位置を再マッピングします
setTransform() 現在の変換をユニットマトリックスにリセットします。その後、transform()を実行します

テキスト

属性 説明
font テキスト内容の現在のフォント属性を設定または返します
textAlign テキスト内容の現在のアライメント方法を設定または返します
textBaseline テキストを描画する際に使用する現在のテキストベースラインを設定または返します
メソッド 説明
fillText() キャンバス上に「塗りつぶされた」テキストを描画します
strokeText() キャンバス上にテキストを描画します（塗りつぶしなし）
measureText() 指定されたテキストの幅を含むオブジェクトを返します

画像描画

メソッド 説明
drawImage() 画像、キャンバス、またはビデオをキャンバスに描画します

ピクセル操作

属性 説明
width ImageData オブジェクトの幅を返します
height ImageData オブジェクトの高さを返します
data 指定された ImageData オブジェクトの画像データを含むオブジェクトを返します
メソッド 説明
createImageData() 新しい、空の ImageData オブジェクトを作成します
getImageData() キャンバス上の指定された矩形のピクセルデータをコピーする ImageData オブジェクトを返します
putImageData() 画像データ（指定された ImageData オブジェクトから）をキャンバスに戻します

合成

属性 説明
globalAlpha 描画の現在のアルファ値または透明度を設定または返します
globalCompositeOperation 新しい画像が既存の画像にどのように描かれるかを設定または返します

その他

メソッド 説明
save() 現在の環境の状態を保存します
restore() 前に保存されたパスの状態と属性を返します
createEvent() 　
getContext() 　
toDataURL()