遠眼鏡屋2

javascript canvas で九路盤を描き、ファイル化する

説明略。

◎9robandraw2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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=450;
canvas.height=450;

ctx.beginPath();
ctx.moveTo(0,0);ctx.lineTo(450,0);
ctx.lineTo(450,450);ctx.lineTo(0,450);ctx.lineTo(0,0);
ctx.lineWidth = 1;
ctx.stroke();
ctx.fillStyle = "#ffd700";
ctx.fill();

ctx.beginPath();
ctx.moveTo(25,25);ctx.lineTo(425,25);
ctx.moveTo(25,75);ctx.lineTo(425,75);
ctx.moveTo(25,125);ctx.lineTo(425,125);
ctx.moveTo(25,175);ctx.lineTo(425,175);
ctx.moveTo(25,225);ctx.lineTo(425,225);
ctx.moveTo(25,275);ctx.lineTo(425,275);
ctx.moveTo(25,325);ctx.lineTo(425,325);
ctx.moveTo(25,375);ctx.lineTo(425,375);
ctx.moveTo(25,425);ctx.lineTo(425,425);
ctx.moveTo(25,25);ctx.lineTo(25,425);
ctx.moveTo(75,25);ctx.lineTo(75,425);
ctx.moveTo(125,25);ctx.lineTo(125,425);
ctx.moveTo(175,25);ctx.lineTo(175,425);
ctx.moveTo(225,25);ctx.lineTo(225,425);
ctx.moveTo(275,25);ctx.lineTo(275,425);
ctx.moveTo(325,25);ctx.lineTo(325,425);
ctx.moveTo(375,25);ctx.lineTo(375,425);
ctx.moveTo(425,25);ctx.lineTo(425,425);
ctx.lineWidth = 1;
ctx.stroke();
ctx.moveTo(125,125);ctx.arc(125, 125, 3, 0, Math.PI*2, false);
// ctx.moveTo(125,225);ctx.arc(125, 225, 3, 0, Math.PI*2, false);
ctx.moveTo(125,325);ctx.arc(125, 325, 3, 0, Math.PI*2, false);
// ctx.moveTo(225,125);ctx.arc(225, 125, 3, 0, Math.PI*2, false);
ctx.moveTo(225,225);ctx.arc(225, 225, 3, 0, Math.PI*2, false);
// ctx.moveTo(225,325);ctx.arc(225, 325, 3, 0, Math.PI*2, false);
ctx.moveTo(325,125);ctx.arc(325, 125, 3, 0, Math.PI*2, false);
// ctx.moveTo(325,225);ctx.arc(325, 225, 3, 0, Math.PI*2, false);
ctx.moveTo(325,325);ctx.arc(325, 325, 3, 0, Math.PI*2, false);
ctx.fillStyle = "black";
ctx.fill();

//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>
<br><br>
</body>
</html>