代码之家 › 专栏 › 技术社区 › Adil15

尝试在HTML棋盘上制作棋子

syntax canvas html jquery javascript

Adil15 · 技术社区 · 6 年前

你好,我试图添加到我的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>

我需要在上面两行加上红色的,在下面两行加上白色的。我似乎不明白为什么我的代码不起作用。任何帮助都将不胜感激

1 回复 | 直到 6 年前

Ali 6 年前

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