遠眼鏡屋2

javascript canvas で黒い円を描きファイル化する

黒石もどきを描くには、HTML5canvas要素と javascript を使う。
下記プログラムをブラウザで開くと、画面上に二つの黒丸が現れる。下段はイメージであるから、右クリックで「名称付き画像保管」できる(chromefirefoxの場合は上段の黒丸からも画像保管できる)。拡張子は png である。

ただの黒丸に見えるが、実は正方形に内接する円形の中を黒く塗り潰したものである(Windows内臓のペイントで確認できる)。だが、他の画像の上に重ねると四隅完全透過になっているので、黒い丸に見える。
なお、他サイトへのアップロードは行わない。

◎arcdraw2.html


<html>
<head>
<script type="text/javascript">

/* 円を描く */
function draw1() {
var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
if ( ! canvas || ! canvas.getContext ) { return false; }

canvas.width=60;
canvas.height=60;
ctx.beginPath();
ctx.arc(30, 30, 30, 0, Math.PI*2, false);
// ctx.stroke();
ctx.fillStyle = "black";
ctx.fill();

//canvasデータを画像に変換する
var png = canvas.toDataURL();
document.getElementById("newImg").src = png;
}
</script>
</head>

<body onload="draw1()">
<h3>Canvasで図形を描く</h3>
<canvas id="c1" ></canvas>

<h3>上の canvasデータを画像に変換する</h3>
<div><img id = "newImg" ></div>
</body>
</html>