<div class="box"> <canvas id="clock" width="400px" height="400px"></canvas> </div> <script> let obj=document.querySelector('#clock') let canvas=obj.getContext('2d') for(let j=0;j<4;j++){ for(let i=0;i<4;i++){ canvas.fillRect(i*80,j*80,40,40); canvas.fillRect(i*80+40,j*80+40,40,40); canvas.strokeRect(i*80+40,j*80,40,40); canvas.strokeRect(i*80,j*80+40,40,40); } } </script>

这段代码实现了一个 4x4 的棋盘，其中黑色方格用 fillRect 方法绘制，白色方格用 strokeRect 方法绘制。以下是代码的解释：

<div class="box">
  <canvas id="clock" width="400px" height="400px"></canvas>
</div>
<script>
  // 获取 canvas 元素
  let obj = document.querySelector('#clock')
  let canvas = obj.getContext('2d')

  // 绘制棋盘
  for (let j = 0; j < 4; j++) {
    for (let i = 0; i < 4; i++) {
      // 绘制黑色方格
      canvas.fillRect(i * 80, j * 80, 40, 40);
      canvas.fillRect(i * 80 + 40, j * 80 + 40, 40, 40);
      // 绘制白色方格
      canvas.strokeRect(i * 80 + 40, j * 80, 40, 40);
      canvas.strokeRect(i * 80, j * 80 + 40, 40, 40);
    }
  }
</script>

代码中通过 canvas.getContext('2d') 获取了 canvas 的 2D 上下文，然后使用 fillRect 和 strokeRect 方法分别绘制了黑色方格和白色方格，并使用 for 循环绘制了整个棋盘。