制作五子棋,棋盘制作
<script> (function(){ let darw = document.querySelector('#darw'); let ctx = darw.getContext('2d'); darw.width = 600; darw.height = 600; darw.style.border = '1px solid #000'; let rectH = 10; let rectW = 10; ctx.lineWidth =0.5; // 绘制表格 //第一步:绘制横线 for(let i = 0;i<darw.width / rectH;i++){ ctx.moveTo(0, i * rectH); ctx.lineTo(darw.width,i * rectH); // 第二步:绘制竖线 ctx.moveTo(i * rectW,0); ctx.lineTo(i * rectW,darw.height); } ctx.stroke(); }())</script>