The Go board has 19 lines horizontally and vertically. If the size of each is 20 pixels X 20 pixels, then the width and height of the board should be 20X18 (360 pixels), because there are 18 squares horizontally and vertically.
Today we use the HTML canvas to draw the chessboard, and the canvas size is 400 pixels by 400 pixels.
<canvas id="canvas" width="400" height="400"></canvas>
<script>
let canv=document.getElementById("canvas");
let context=canv.getContext("2d");
context.beginPath();
for(let i=0;i<19;i++){
context.moveTo(10+i*20,10);
context.lineTo(10+i*20,370);
context.moveTo(10,10+i*20);
context.lineTo(370,10+i*20);
}
context.stroke();
</script>
How to use the code: Create a new text document (txt) on the computer desktop, copy the code into the document, save it, change
the document suffix .txt to .html , and then double-click the file to run.
The knowledge point here is nothing more than a for loop, which loops 19 times, draws a horizontal line and a vertical line each time, the chessboard starts at (10, 10) and ends at (370, 370). For details, see the code for brain thinking!
The beginPath and stroke functions are used to draw lines.