canvas要素のテスト

2005年 10月 08日(土曜日) 23:10 CrapeMyrtle Tips - プログラミング
印刷

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

(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>
最終更新 2010年 3月 19日(金曜日) 01:49