如何移动一个矩形与箭头键，同时清除画布之间的每次重新绘制

How move a rectangle with arrow keys while clearing the canvas in between every re-draw

本文关键字：布之间 之间 清除 绘制 新绘制 移动 何移动 一个      更新时间：2023-09-26
<!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();谢谢。

更正后的代码:

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

要清除整个画布，你需要这样做:

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

把它放在x++和ctx.fillRect()之间。

我还在你的代码中看到另一个错误:

当你处理向下箭头键事件时，你不使用y++，所以矩形不会向下移动。我帮你改正了。
错误2:你没有使用e.preventDefault，所以每次我移动矩形时，窗口也滚动(如果它太小)。

相关文章：