Canvasに矩形を描いてみるのメモ。
HTML
<canvas id='canvas'></canvas> |
JavaScript
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); context.fillStyle = "#ff0000"; context.fillRect(50,30,250,100); |
canvas.getContext(‘2d’) で context instanceを取得。
context instanceが描画のキモ。
fillStyle
で塗り色を指定。
指定はString型、指定はhex、CSSと同じ。
fillRect
矩形(Rectangle)で描画。
引数(Argument)
x position, y position, width, height
たぶんint型で指定するんだろうけど、JavaScriptだしあんまり意味はないのかなぁ。
結果もBitmapになるし。
floatにするとどうなるんだろう。
試してみた。
floatで指定してもintの時と変わらない。
内部ではintで処理してるのかな。