Question

我今天开始学习画布，我开始创建一个简单的矩形，我需要使用箭头键移动这个矩形，但moveTo函数似乎没有做任何事情，我怎么能实现这一点。到目前为止，这是我的代码

<html>
    <head>
        <title></title>
    </head>

    <body>
        <canvas id="myCanvas" width="600" height="250" style="border:1px
        solid black;">
        </canvas>

     <script type="text/javascript">
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.fillStyle = "green";

        var x = 50,y=5,w=100,h=100;
        context.fillRect(x,y,w,h);

        document.onkeydown = function move()
        {
            switch(window.event.keyCode)
            {
                case 37:
                {
                    //left
                    context.moveTo(x++,y);
                    break;
                }
                case 38:
                {
                    console.log('up');
                    break;
                }
                case 39:
                {
                    console.log('right');
                    break;
                }
                case 40:
                {
                    console.log('down');
                    break;
                }
            }
        }
     </script>
    </body>
    </html>

Answer 1

使用fillRect绘制矩形后，无法在画布周围移动矩形。

画布只是一个图像，因此您的矩形变成了画布上绘制的不可移动的形状。

要“移动”形状，您必须清除画布并将形状重新绘制到新位置。

BTW，context.moveTo是一个路径命令，它告诉上下文将其绘图笔移动到指定位置。它不会在画布上移动现有形状。

例如，在响应左箭头键时在您的keyhandler中：

向左更改x坐标：x - ;
清除画布：context.clearRect（0,0，canvas.width，canvas.height）;
在新位置重绘矩形：context.fillRect（x，y，w，h）;

canvas如何使用箭头移动rect

1 个答案: