canvas五子棋盘

制作五子棋，棋盘制作

 

 

<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>