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

Question

Hello I am trying to add pieces to my html checkerboard but cant find what seems to be going wrong with my code. 您好，我正在尝试向我的html棋盘添加片段，但是找不到我的代码似乎出了什么问题。 I have made the function to make my pieces but I keep getting a blank screen. 我已经完成了制作作品的功能，但是却不断出现空白屏幕。

    <!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>

I need to add red pieces on the top two rows and white pieces on the bottom two rows. 我需要在顶部两行添加红色部分，在底部两行添加白色部分。 I can't seem to figure out why my code is not working. 我似乎无法弄清楚为什么我的代码无法正常工作。 Any help would be appreciated 任何帮助，将不胜感激

Answer 1

it seems that it is an stupid syntax error, in the title of drawPieces function it has a '=' and when I have found and erase it, your code has worked. 看来这是一个愚蠢的语法错误，在drawPieces函数的标题中有一个'='，当我找到并删除它时，您的代码已经起作用。
Update: in call of drawPieces function, it was drawpieces. 更新：在drawPieces函数的调用中，它是小笔。 and you didn't define step there. 并且您没有在此处定义步骤。

please check again if your problem has solved. 请再次检查您的问题是否已解决。

 $(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 个解决方案

解决方案1
0 2018-08-13 04:22:45

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

问题描述

1 个解决方案

解决方案1 0 2018-08-13 04:22:45

解决方案1
0 2018-08-13 04:22:45