棋盘方格绘制
js代码：
// JavaScript Document
var cav = document.getElementById("cav").getContext("2d");
for (var j = 0; j < 10; j++) {//j为棋盘列数
for (var i = 0; i < 10; i++) {//i为棋盘行数
cav.beginPath();
cav.strokeStyle = "rgb(147,109,70)";
//每个格子的宽高都为50像素，语法rect(x, y, w, h)
cav.rect(115 + j * 30, 85 + i * 30, 30, 30);
cav.stroke();
}
}
cav.beginPath();//棋盘外部的大正方形
cav.lineWidth=4;//设置线宽
cav.strokeRect(100,70,330,330);
cav.stroke();html文件
<!doctype html> <html> <head> <meta charset="utf-8"> <title>平移图形</title> </head> <link href="css/style.css" type="text/css" rel="stylesheet"> <body> <div class="mr-cont"> <!--设置画布高位870像素，宽慰1208像素，并且设置id为cav--> <canvas id="cav" height="504" width="700"></canvas> </div> </body> <script type="text/javascript" src="js/js.js"></script> </html>
css代码
@charset "utf-8";
/* CSS Document */
.mr-cont{
height: 700px;
width: 504px;
margin: 0 auto;
}
#cav{
border: 1px solid #f00;
background: url(../img/bg.png);
}棋盘图片
五子棋棋盘代码逐行详细讲解
这是一段用 Canvas 绘制五子棋棋盘的 JavaScript 代码。我来逐行详细讲解每一句的作用。
第1行：获取Canvas上下文
var cav = document.getElementById("cav").getContext("2d");含义：获取页面中 id 为 "cav" 的 Canvas 元素的 2D 绘图上下文，并赋值给变量 cav。
词源：
getElementById：通过 ID 获取元素getContext：获取绘图上下文"2d"：指定为二维绘图上下文
作用：之后所有绘图操作都通过 cav 对象调用。
第2行：外层循环控制列数
for (var j = 0; j < 10; j++) {//j为棋盘列数含义：声明变量 j 从 0 开始，每次循环加 1，直到 j < 10 条件不成立时结束。循环执行 10 次，j 的值依次为 0,1,2,...,9。
注释说明：j 代表棋盘的列数，即横向有多少条线。
第3行：内层循环控制行数
for (var i = 0; i < 10; i++) {//i为棋盘行数含义：对于每一个 j 值，内层循环声明变量 i 从 0 开始，每次循环加 1，直到 i < 10 时结束。循环执行 10 次，i 的值依次为 0,1,2,...,9。
注释说明：i 代表棋盘的行数，即纵向有多少条线。
嵌套循环结果：外层循环每执行一次，内层循环就要完整执行 10 次。总共执行 10 × 10 = 100 次内层循环体。
第4行：开始新路径
cav.beginPath();
含义：开始一个新的绘图路径。
作用：每次绘制一个小方格前都重新开始一条新路径，避免之前绘制的路径影响到当前绘制。
第5行：设置描边颜色
cav.strokeStyle = "rgb(147,109,70)";
含义：设置绘图的描边颜色为 RGB 值 (147,109,70)。
颜色说明：这是一个木棕色，模拟传统棋盘的颜色。
作用：之后所有 stroke() 描边操作都会使用这个颜色。
第6行：注释说明
//每个格子的宽高都为50像素，语法rect(x, y, w, h)
含义：这是一条注释，说明每个小方格的尺寸是 50×50 像素，并提醒 rect() 方法的参数顺序。
注意：代码中实际格子宽高是 30 像素，不是 50。注释可能是旧版本的说明，未及时更新。
第7行：绘制矩形路径
cav.rect(115 + j * 30, 85 + i * 30, 30, 30);
含义：在画布上定义一个矩形路径。
参数详解：
115 + j * 30：矩形左上角的 X 坐标基础偏移量
115是棋盘左边距画布边缘的距离j * 30是列偏移量，每增加一列，X 坐标向右移动 30 像素85 + i * 30：矩形左上角的 Y 坐标基础偏移量
85是棋盘上边距画布边缘的距离i * 30是行偏移量，每增加一行，Y 坐标向下移动 30 像素30, 30：矩形的宽度和高度，都是 30 像素
计算示例：
当
i=0, j=0时：rect(115, 85, 30, 30)→ 第一个小方格当
i=0, j=1时：rect(145, 85, 30, 30)→ 第一行第二个小方格当
i=1, j=0时：rect(115, 115, 30, 30)→ 第二行第一个小方格
作用：这个 rect() 只是定义了矩形路径，还没有真正画到画布上。
第8行：描边路径
cav.stroke();
含义：用当前设置的 strokeStyle 颜色描边当前路径。
作用：将之前 rect() 定义的矩形路径真正绘制到画布上，形成一个可见的小方格边框。
至此：一个完整的小方格就画完了。
第9-10行：结束内层循环和外层循环
} }
含义：第一个 } 结束内层 for 循环，第二个 } 结束外层 for 循环。
执行结果：循环结束后，画布上绘制了一个 10×10 的网格，共有 100 个小方格。
第11行：开始新路径（用于外框）
cav.beginPath();//棋盘外部的大正方形
含义：重新开始一条新路径，准备绘制棋盘的外边框。
注释说明：明确说明这里要绘制的是棋盘外部的大正方形边框。
为什么需要再次 beginPath()：如果不开始新路径，之前绘制小方格时留下的路径信息可能会影响当前绘制。
第12行：设置线宽
cav.lineWidth=4;//设置线宽
含义：设置描边的线条宽度为 4 像素。
作用：让棋盘外框比内部小方格的边框（默认 1 像素）更粗，起到突出和装饰作用。
第13行：绘制描边矩形
cav.strokeRect(100,70,330,330);
含义：直接绘制一个描边矩形，不需要 rect() + stroke() 两步。
strokeRect() 的特点：
这是一个独立的方法，直接绘制矩形边框
不需要先调用
rect()再调用stroke()参数同样是
(x, y, width, height)
参数详解：
x = 100：矩形左上角 X 坐标y = 70：矩形左上角 Y 坐标width = 330：矩形宽度height = 330：矩形高度
为什么用 330？：
内部网格有 10 行 10 列，每个格子 30 像素
网格实际占用的宽度是
10 × 30 = 300像素外框多出的 30 像素是给边缘留出的空白（左边距 15 像素，右边距 15 像素）
第14行：再次描边
cav.stroke();
含义：执行描边操作。
疑问：这里为什么要再执行一次 stroke()？
分析：这一行可能是多余的，因为：
strokeRect()已经完成了描边当前路径可能为空（没有新的
rect()或beginPath()之间的内容）执行这一行通常不会产生可见效果
可能的原因：
开发者的习惯性写法
为后续可能的路径绘制预留
代码复用的遗留
棋盘布局分析
坐标计算图解
数值关系
内部网格起点：
(115, 85)外框起点：
(100, 70)内部网格占用：300×300 像素
外框占用：330×330 像素
边距：上/左各 15 像素
完整执行流程总结
获取绘图上下文：拿到画笔
嵌套循环：10×10 次绘制小方格
每次绘制一个小方格边框
绘制外框：
设置线宽为 4 像素
绘制更大的外框矩形
完成绘制：一个 10×10 的五子棋棋盘呈现在画布上
代码存在的问题
注释不准确：注释说格子宽高 50 像素，实际是 30 像素
多余的
stroke()：第 14 行的cav.stroke()可能是多余的硬编码数值：所有坐标都是固定数值，不易维护
缺少变量定义：格子大小、棋盘大小等应该定义为变量
改进建议：
const CELL_SIZE = 30;
const BOARD_SIZE = 10;
const OFFSET_X = 115;
const OFFSET_Y = 85;
for (let row = 0; row < BOARD_SIZE; row++) {
for (let col = 0; col < BOARD_SIZE; col++) {
cav.strokeRect(
OFFSET_X + col * CELL_SIZE,
OFFSET_Y + row * CELL_SIZE,
CELL_SIZE,
CELL_SIZE
);
}
}