Question

你好，我试图将片段添加到我的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>

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

Answer 1

这似乎是一个愚蠢的语法错误，在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>

尝试在HTML检查板上制作碎片

1 个答案: