HTML5 clearRect不工作

-1

你好，有人可以告诉我，我的代码是错误的。当我做清楚的矩形，它是行不通的。HTML5 clearRect不工作

我只是试图移动画布中的球。其实我的球留下了痕迹。这种线是假的。 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>

来源

2011-09-25 Cédric Boivin

你能描述标记？ –

它不应该是：

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

还是我误解的东西？

如果以相反方式进行操作，则唯一清除的矩形是从（0,0）到（球的宽度，球高度）的平方。

编辑：它实际上可能如果你的球在ballX中心是

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

。

编辑编辑：

我固定它给你：

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();

来源

2011-09-25 23:42:50

这是行不通的。我的球留下一个印记。 –

我做了一个编辑。现在就试试。你还可以屏幕截图什么类型的标记> –

我试了一下，这是行不通的。 –

你的文档的DocType是错误的

对于HTML5尝试

<!DOCTYPE HTML>

这可以从一些浏览器会导致错误的行为..

一些html资源...

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

来源

2011-09-25 23:45:26 blad

谢谢，但我不认为我的问题与文档类型相关联。 –

HTML5 clearRect不工作

回答

相关问题