[html 5][JavaScript]canvasタグで図形を表示する

昨日までは、oracleで今日はhtmlと全然つながりがない話なのですが。。。

もうすでに色々なところで話がでてきていますが、htmlバージョン5の動きが加速しています。

動きに乗り遅れるのは嫌なので、さっそくどんなことができるのか調査に乗り出しました。

そこで今日は、新タグcanvasタグで図形を表示するところから行きたいと思います。

<!-- キャンバスを配置 -->
<canvas id="canvas1" width="300" height="240"></canvas>

<script type="text/javascript">
var canvas = document.getElementById("canvas1");

// キャンバスに対して2Dグラフィックスを行うコンテキストを取得
var context = canvas.getContext("2d");

// 四角を描画
context.fillRect(0,0,50,50);
</script>

via:5分で把握するHTML5 - Google Developer Dayセッションリポート

実際に実行してみると下記のようになる


firefox 3.0、google chrome 4.0では表示されましたが、他のブラウザではどうなのでしょうか？
黒い四角形が表示されると思います。

おそらくIE 6、IE 7辺りが表示されないんじゃーないかなー。

これだとただ記事をコピペしただけなので、色を指定して再度描画してみたい。

<canvas>タグ リファレンスを読むと、fillStyleプロパティで指定するようです。

<!-- キャンバスを配置 --> <canvas id="canvas1" width="300" height="240"></canvas> <script type="text/javascript"> var canvas = document.getElementById("canvas1"); // キャンバスに対して2Dグラフィックスを行うコンテキストを取得 var context = canvas.getContext("2d"); //赤に設定 context.fillStyle = "rgba(255,0,0,1)"; // 四角を描画 context.fillRect(0,0,50,50); </script>

実行結果はこのようになります。


是非、rgbaの数字を変えてみて、色々と試してみてください。