Question

<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <style>

            canvas {
                border: 1px solid black;
                width: 1200px;
                height: 600px;
            }

        </style>

    </head>

    <body>

        <script>
            var z = document.createElement("CANVAS");
            var ctx = z.getContext("2d");

            var x = 20;
            var y = 20;

            ctx.fillRect(x, y, 5, 5);
            ctx.stroke();
            document.body.appendChild(z);

            document.onkeydown = checkKey;

            function checkKey(e) {


                e = e || window.event;

                if (e.keyCode == '38') {
                    y--;
                    ctx.fillRect(x, y, 5, 5);

                }
                else if (e.keyCode == '40') {
                    // down arrow
                    ctx.fillRect(x, y, 5, 5);

                }
                else if (e.keyCode == '37') {
                    // left arrow
                    x--;
                    ctx.fillRect(x, y, 5, 5);

                }
                else if (e.keyCode == '39') {
                    // right arrow
                    x++;
                    ctx.fillRect(x, y, 5, 5);

                }

            }

        </script>


    </body>

</html>

每次我尝试使用以下命令清除画布：ctx.clearRect（0,0,1200,600）;或者ctx.clearCanvas（）;什么都没发生。矩形甚至不动。我把它放在x ++之间;和ctx.fillRect（）;.感谢。

Answer 1

这是更正后的代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<!DOCTYPE html>

<html>

    <head>

        <title></title>

        <style>

            canvas {
                border: 1px solid black;
                width: 1200px;
                height: 600px;
            }

        </style>

    </head>

    <body>

        <script>
            var z = document.createElement("CANVAS");
            var ctx = z.getContext("2d");

            var x = 20;
            var y = 20;

            ctx.fillRect(x, y, 5, 5);
            ctx.stroke();
            document.body.appendChild(z);

            document.onkeydown = checkKey;
          function clear() {
            ctx.clearRect(0, 0, z.width, z.height);
          }

            function checkKey(e) {

e.preventDefault();
                e = e || window.event;

                if (e.keyCode == '38') {
                    y--; clear();
                    ctx.fillRect(x, y, 5, 5);

                }
                if (e.keyCode == '40') {
                    // down arrow
                    y++;clear();
                    ctx.fillRect(x, y, 5, 5);

                }
                if (e.keyCode == '37') {
                    // left arrow
                  clear();
                    x--;
                    ctx.fillRect(x, y, 5, 5);

                }
                if (e.keyCode == '39') {
                    // right arrow
                  clear();
                    x++;
                    ctx.fillRect(x, y, 5, 5);

                }

            }

        </script>


    </body>

</html>
</body>
</html>

＆＃13;

要清除整个画布，您需要：

ctx.clearRect(0, 0, z.width, z.height);

您将其放在x++和ctx.fillRect()之间。

我还在您的代码中看到了另一个错误：

当您处理向下箭头键事件时，您不能使用y++，因此矩形不会向下移动。我为你纠正了这个错误2：您没有使用e.preventDefault所以每次移动矩形时，窗口也会滚动（如果它太小）。

如何在每次重新绘制之间清除画布的同时使用箭头键移动矩形

1 个答案: