Javascript 画布如何使用箭头移动rect_Javascript_Canvas

Javascript 画布如何使用箭头移动rect

javascript canvas

Javascript 画布如何使用箭头移动rect,javascript,canvas,Javascript,Canvas,我今天开始学习画布，我开始创建一个简单的矩形，我需要使用箭头键使这个矩形移动，但是moveTo函数似乎没有任何作用，我如何才能实现这一点。这是到目前为止我的代码 <html> <head> <title></title> </head> <body> <canvas id="myCanvas" width="600" height="250" style="

我今天开始学习画布，我开始创建一个简单的矩形，我需要使用箭头键使这个矩形移动，但是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>


var canvas=document.getElementById（“myCanvas”）；
var context=canvas.getContext（“2d”）；
context.fillStyle=“绿色”；
变量x=50，y=5，w=100，h=100；
fillRect（x，y，w，h）；
document.onkeydown=函数move（）
{
开关（window.event.keyCode）
{
案例37：
{
//左
moveTo（x++，y）；
打破
}
案例38：
{
console.log（'up'）；
打破
}
案例39：
{
console.log（'right'）；
打破
}
案例40：
{
console.log（'down'）；
打破
}
}
}

使用fillRect绘制矩形后，不能在画布上移动矩形

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

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

顺便说一句，context.moveTo是一个path命令，它告诉上下文将其绘图笔移动到指定位置。它不会移动画布上的现有形状

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

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