物置っぽい何か

まったり まったり

ホーム / Tips / プログラミング / canvas要素のテスト

canvas要素のテスト

Eメール 印刷

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