Canvas関連まとめ
Canvasは2Dも3Dも描画できる
ただし、2D描画は2Dコンテキストを取得しないとダメ
塗り関連はfillStyle
線関連はstrokeStyleで
設定する
座標点の移動は
moveTo()
でする
直線を描くには
lineTo()
四角形を描画するには
fillRect()
rect()
clearRect()
strokeRect()
を使う
曲線を描くときには
二次ペジェ曲線ならquadraticCurveTo()
三次ペジェ曲線なら
bezierCurveTo()
を使う
複雑な図形、多角形などを描くには
複数のパスを組み合わせる
パスは
beginPath()で新規にパスを作成できる
パスを閉じるには
closePath()を使う
クリッピングするには、パスを作成したあとclip()を使う
画像と映像の描画は
drawImage()を使う
影は
shadowColor
shadowBlur
shadowOffsetX
shadowOffsetY
で設定する
文字の描画は
fillText()
strokeText()
を使う
文字サイズや書体は、fontに設定
文字の行揃えは textAlignで設定
不透明度は
globalAlphaで設定
線幅は lineWidth
線端の形状は lineCapで設定
ピクセルデータを読み出すには
getImageData()
ピクセルデータを描画するには
putImageData()