FC2ブログ

Canvasまとめ

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()
スポンサーサイト



コメント

非公開コメント

最新記事
検索フォーム
GREEハコニワ攻略サイト
リンク
カテゴリ
月別アーカイブ
フリーエリア
最新記事
FXプライムレート
最新コメント
最新トラックバック