[html] 第585天 使用canvas画一个五子棋的棋盘

[haizhilin2013]

第585天 使用canvas画一个五子棋的棋盘

3+1官网

我也要出题

[Shimiankang]

CSS样式：
#wrap{ width: 100%; height:100vh; text-align: center; } #myCanvas{ margin-top:50px; cursor: pointer; background: #f3b14d; }

HTML标签：
<div id="wrap"> <canvas id="myCanvas" width="640" height="640"></canvas> </div>

JS：

var canvas = document.getElementById("myCanvas");	
var ctx = canvas.getContext("2d");
	
   //画标点
   ctx.beginPath();
   ctx.arc(160,160,5,0,2*Math.PI);
   ctx.arc(320,160,5,0,2*Math.PI);
   ctx.arc(480,160,5,0,2*Math.PI);
   ctx.fill(); 
   ctx.closePath();
   
   ctx.beginPath();
   ctx.arc(160,320,5,0,2*Math.PI);
   ctx.arc(320,320,5,0,2*Math.PI);
   ctx.arc(480,320,5,0,2*Math.PI);
   ctx.fillStyle = "#000";
   ctx.fill();
   ctx.closePath();
   
   ctx.beginPath();
   ctx.arc(160,480,5,0,2*Math.PI);
   ctx.arc(320,480,5,0,2*Math.PI);
   ctx.arc(480,480,5,0,2*Math.PI);
   ctx.fillStyle = "#000";
   ctx.fill();
   ctx.closePath();
   
//画棋盘
for (i = 40; i < 640; i += 40) {
	ctx.beginPath();
	ctx.moveTo(40, i);
	ctx.lineTo(600, i);
	ctx.closePath();
	ctx.stroke();
	ctx.beginPath();
	ctx.moveTo(i, 40);
	ctx.lineTo(i, 600);
	ctx.closePath();
	ctx.stroke();
}