遠眼鏡屋2

白丸(白石もどき)を作る

javascript canvas で黒い円を描きファイル化する と同じ要領で、今度は白丸(白石もどき)のファイルを作ってみる。
◎ arcdraw3.html

<html>
<head>
<script type="text/javascript">
onload = function() {
draw1();
};

/* 円を描く */
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.fillStyle = "#f5f5f5";
ctx.strokeStyle = "black";
ctx.arc(30, 30, 30, 0, Math.PI*2, false);
ctx.fill();
ctx.stroke();

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

<body>
<h2>Canvasで図形を描く</h2>
<canvas id="c1" style= "background-color:#ffffff;" ></canvas>
<p>
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
<br><br>
<div><img id = "newImg" ></div>
</body>
</html>

注意すべきは、白丸は塗りつぶすだけでは背景との境界が美しくないので、外枠をストロークする必要があることだ。