尝试在 HTML 棋盘上拼图答案

【问题标题】：Trying to make pieces on an HTML checker board尝试在 HTML 棋盘上拼图
【发布时间】：2019-01-19 18:00:31
【问题描述】：

您好，我正在尝试将片段添加到我的 html 棋盘格中，但找不到我的代码似乎出了什么问题。我已经完成了制作作品的功能，但我一直出现空白屏幕。

    <!DOCTYPE html>
        <html>
        <head>
        <title>Canvas - Chess Board</title>
        <meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<style>
    p {
    position: absolute;
    left: 200px;    
    top: 45px;
}
</style>
<body>
<div style="padding:30px">
    <h2>Chess Board</h2>
    <p><input type="text" id="color"></p>
    <canvas id="myCanvas" width="480" height="480" style="border:1px solid #c3c3c3;">
    </canvas>
</div>

<script>
$(document).ready(function() {
    var gColor = "black";
    var c = $("#myCanvas")[0];
    var ctx = c.getContext("2d");

    ctx.lineWidth = 2;
    ctx.strokeStyle = "black";  //set the color, gradient, or pattern for stroke

    drawBoard();
    $("#color").click(function () {
        gColor = $("#color").val();
        if (gColor > "")
            drawBoard();
         drawpieces(ctx, step, "red", step);
        drawpieces(ctx, step*7, "white", step);
    });

  function drawBoard() {
    var x, y, step = 60, step2 = 120;
    ctx.rect(0,0,480,480);
    ctx.stroke();
    ctx.save();

    for (var k=0; k<2; k++)  {
        step2 -= step;
        ctx.translate(0, step*k);
        console.log("translate:("+0+","+step*k+")");
        for (var y=0; y<4; y++) {
            for (var i=0; i<4; i++)  {
        x = i * 2 * step + step2;
        ctx.fillStyle = gColor;
        ctx.fillRect(x,y*step*2,step,step);
                console.log("fillRect: "+x+","+y*step*2+","+step+","+step+","+gColor);
            }
        }
    }

    ctx.restore();
  }
function drawPieces = (ctx, y , color, step){
    for (let i = y; i < 2 * step + y; i += step) {
    for (let j = step / 2; j < 8 * step; j += step) {
      ctx.beginPath();
      ctx.arc(j, i - step / 2, step / 3, 0, Math.PI * 2);
      ctx.fill();
}
    }
});


</script>
</body>
</html>

我需要在前两行添加红色块，在底部两行添加白色块。我似乎无法弄清楚为什么我的代码不起作用。任何帮助将不胜感激

【问题讨论】：

标签： javascript jquery html canvas syntax

【解决方案1】：

这似乎是一个愚蠢的语法错误，在 drawPieces 函数的标题中它有一个“=”，当我找到并删除它时，你的代码已经工作了。
更新： 在调用drawPieces函数时，它是drawpieces。而且你没有在那里定义步骤。

请再次检查您的问题是否已解决。

$(document).ready(function() {
    var gColor = "black";
    var c = $("#myCanvas")[0];
    var ctx = c.getContext("2d");

    ctx.lineWidth = 2;
    ctx.strokeStyle = "black";	//set the color, gradient, or pattern for stroke

    drawBoard();
    $("#color").click(function () {
        gColor = $("#color").val();
        step = 60; // maybe 60
        if (gColor > "")
            drawBoard();
         drawPieces(ctx, step, "red", step);
        drawPieces(ctx, step*7, "white", step);
    });

  function drawBoard() {
    var x, y, step = 60, step2 = 120;
    ctx.rect(0,0,480,480);
    ctx.stroke();
    ctx.save();

    for (var k=0; k<2; k++)  {
        step2 -= step;
        ctx.translate(0, step*k);
        console.log("translate:("+0+","+step*k+")");
        for (var y=0; y<4; y++) {
            for (var i=0; i<4; i++)  {
              x = i * 2 * step + step2;
              ctx.fillStyle = gColor;
              ctx.fillRect(x,y*step*2,step,step);
              console.log("fillRect: "+x+","+y*step*2+","+step+","+step+","+gColor);
            }
        }
    }

    ctx.restore();
  }

  function drawPieces (ctx, y , color, step){
    for (let i = y; i < 2 * step + y; i += step) {
      for (let j = step / 2; j < 8 * step; j += step) {
        ctx.beginPath();
        ctx.arc(j, i - step / 2, step / 3, 0, Math.PI * 2);
        ctx.fill();
      }
    }
  }

});

p {
  position: absolute;
  left: 200px;    
  top: 45px;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Canvas - Chess Board</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
  </head>
  <body>
    <div style="padding:30px">
      <h2>Chess Board</h2>
      <p><input type="text" id="color"></p>
      <canvas id="myCanvas" width="480" height="480" style="border:1px solid #c3c3c3;">
      </canvas>
    </div>
  </body>
</html>

【讨论】：

嘿阿里，谢谢我错过了我的语法错误！我的作品仍然没有出现，但这是我主要关心的问题。谢谢
嘿，我又发现了一些语法错误，并编辑答案。你应该试着学会仔细检查你的代码