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>