JavaScriptグラフィック(1)

Safari, FireFoxはオッケー。IEは未対応。Google Code の ExplorerCanvas というプロジェクトで、 IE6 で canvas を表示するための JavaScript コードが公開されているので利用するべし。解凍してexcanvas.jsをインクルードする。

<!--[if IE]>
<script type="text/javascript" src="excanvas.js"></script>
<![endif]-->

Canvasタグ

<canvas id="example_canvas" width="150" height="150"></canvas>

var canvas  = document.getElementByID("example_canvas");
var context = canvas.getContext("2d");

長方形

context.fillStyle = "rgb(200,0,0)";
context.fillRect (30, 30, 50, 50);

円（筆方式)

context.fillStyle = "rgba(0, 0, 200, 0.5)";
context.beginPath();
context.arc(100, 100, 50, 0, 2*Math.PI, true);
context.fill();

三角形

context.beginPath();
context.moveTo(70, 70);
context.lineTo(105,120);
context.lineTo(25,125);
context.lineTo(70, 70);
context.stroke();

ここにCanvasの詳しい説明。