イナヅマTVログ

Canvas始めました – 矩形を描く

| 0件のコメント

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で処理してるのかな。

コメントを残す

必須欄は * がついています


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください