Question

我正在尝试创建一个矩形，该矩形可以在以下条件下与鼠标一起移动：在移动鼠标的同时，我还按下了鼠标按钮。

function mouseMove(event){

            if(isShapeClicked==true){

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.rect(event.clientX,event.clientY,200,200);
                context.fillStyle="#0000CC";
                context.fill();


            }
        }
        function mouseDown(event){
            var x = event.clientX;
            var y = event.clientY;
            if((event.clientX > shapeX) && (event.clientX < shapeX + 200) && (event.clientY > shapeY) && (event.clientY < shapeY + 200)){
                isShapeClicked=true;
            }

        }

但是，当我启动程序时，我可以移动矩形，但是不会删除之前的矩形。我最后得到了一行跟随鼠标的矩形。我不知道为什么在函数中的第一个命令是清除画布。在此先感谢那些可以帮助我的人。

这是要求的全部代码

    <html>
<head>
    <script src="formenspiel.js"></script>
    <script src="fps.js"></script>
    <link rel="stylesheet" type="text/css" href="game.css">
</head>
<body onmousemove="mouseMove(event)" onmouseup="mouseReleased(event)" onmousedown="mouseDown(event)">
    <canvas id="myCanvas" width="1500" height="1000"></canvas>
    <script>
        var canvas=document.getElementById("myCanvas");
        var context=canvas.getContext("2d");
        var shapeX = 100;
        var shapeY = 100;
        var isShapeClicked = false;

        context.rect(100,100,200,200);
        context.fillStyle="#0000CC";
        context.fill();
        timer();
        function timer(){
            fps();
            moveShape();
            setTimeout(timer,16);
        }
        function calc(){

        }

        function mouseMove(event){

            if(isShapeClicked==true){

                context.clearRect(0, 0, canvas.width, canvas.height);
                context.rect(event.clientX,event.clientY,200,200);
                context.fillStyle="#0000CC";
                context.fill();


            }
        }
        function mouseDown(event){
            var x = event.clientX;
            var y = event.clientY;
            if((event.clientX > shapeX) && (event.clientX < shapeX + 200) && (event.clientY > shapeY) && (event.clientY < shapeY + 200)){
                isShapeClicked=true;
            }

        }
        function mouseReleased(event){
            isShapeClicked=false;
        }
    </script>
</body>

移动矩形时清除画布的问题

0 个答案: