canvas要素のテスト

Firefox1.5betaからcanvas要素とやらに対応してみたいなので，ちょこっとやってみる．と言ってもほんのちょっと調べただけで本格的にやるつもりはないが…．

ソースはこんな感じ．

<script type="text/javascript">
function draw_canvas_test() {
  var canvas = document.getElementById("canvas-test");
  if ( !canvas.getContext ) {
    alert( "canvas要素に未対応です！" );
    return;
  }
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "#fff";
  ctx.fillRect( 0, 0, canvas.width, canvas.height );
  fillCircle( ctx, 100, 70, 60, "rgba( 255, 0, 0, 0.5 )" );
  fillCircle( ctx, 70, 130, 60, "rgba( 0, 255, 0, 0.5 )" );
  fillCircle( ctx, 130, 130, 60, "rgba( 0, 0, 255, 0.5 )" );
}
function fillCircle( ctx, x, y, r, col ) {
  ctx.fillStyle = col;
  ctx.beginPath();
  ctx.arc( x, y, r, 0, Math.PI * 2, true );
  ctx.closePath();
  ctx.fill();
}
</script>
<canvas
  id="canvas-test"
  width="200"
  height="200"
  style="display: block; border-style: dotted; border-width: 2px; margin: 1em auto;"
> </canvas>
<button
  onclick="draw_canvas_test();"
  onkeypress="draw_canvas_test();"
>描画</button>