Question

你好，有人可以告诉我，我的代码错了。当我做清除矩形时，它不起作用。

我只是试着在画布上移动球。实际上我的球留下了痕迹。这种线是离开的。 enter image description here

     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script src="_js/jquery1.6.js" type="text/jscript"></script> 
    </head>
    <body>    
        <canvas id="dropBall" width="400" height="400"></canvas>
     <script>
         var dropBall = $("#dropBall")[0];
         var dropContext = dropBall.getContext("2d");
dropContext.fillStyle = "green";
         var ballX = 200;
         var ballY = 200;
         function activeBall() {
             dropContext.clearRect(0, 0, dropBall.width, dropBall.height);
             dropContext.arc(ballX, ballY, 10, 2 * Math.PI, 0, true);
             dropContext.fill();

             ballY--;
             ballX++;
             var time = 100;
             setTimeout("activeBall()", time);
         }
         activeBall();
    </script>
    </body>

Answer 1

不应该是：

dropContext.clearRect(ballX,ballY,dropBall.width,dropBall.height);

还是我误解了什么？

如果你这样做，那么唯一被清除的矩形就是从（0,0）到（球的宽度，球的高度）的正方形。

编辑：它实际上可能是

dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);

如果你的球以ballX为中心。

编辑编辑：

我为你修好了：

function activeBall() {
         dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);
         dropContext.beginPath();
         dropContext.arc(ballX, ballY, 10, 2 * Math.PI, 0, true);
         dropContext.fill();

         ballY--;
         ballX++;
         var time = 100;
         setTimeout("activeBall()", time);
     }

您正在清除画布左上角的矩形。
您必须调用beginPath（）然后执行所有绘图工作。必须在beginPath（）和fill（）之外调用清除。

具体的行是：

         dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);
         dropContext.beginPath();

Answer 2

您的文档DocType错误

对于HTML5，请尝试

<!DOCTYPE HTML>

这可能会导致某些浏览器出现错误行为。

一些html资源......

http://simon.html5.org/html-elements http://www.w3schools.com/html5/tag_doctype.asp

HTML5 clearRect不起作用

2 个答案: