HTML5 clearRect не работает - PullRequest
Новая
       5

HTML5 clearRect не работает

0 голосов
/ 26 сентября 2011

Здравствуйте, может кто-нибудь сказать мне, что с моим кодом что-то не так. Когда я делаю четкий прямоугольник, он не работает.

Я просто пытаюсь переместить мяч на холсте. На самом деле мой мяч оставить след. Этот вид линии уйти. 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>

Ответы [ 2 ]

3 голосов
/ 26 сентября 2011

Разве это не должно быть: 

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

или я что-то неправильно понимаю?

Если вы сделаете это наоборот, то единственный очищаемый прямоугольник - это квадрат от (От 0,0) до (ширина шара, высота шара).

РЕДАКТИРОВАТЬ: Это на самом деле может быть 

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

Если ваш шар центрирован на шаре X.

РЕДАКТИРОВАТЬ РЕДАКТИРОВАТЬ:

Я исправил это для вас: 

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);
     }
  1. Вы очищали прямоугольник в верхнем левом углу вашего холста.
  2. У вас естьчтобы вызвать beginPath (), а затем выполнить всю работу по рисованию.Очистка должна вызываться вне beginPath () и fill ().

Конкретные строки: 

         dropContext.clearRect(ballX-(dropBall.width/2),ballY-(dropBall.height/2),dropBall.width,dropBall.height);
         dropContext.beginPath();
0 голосов
/ 26 сентября 2011

Ваш DocType документа неправильный

Для HTML5 попробуйте 

<!DOCTYPE HTML>

Это может вызвать неправильное поведение в некоторых браузерах ..

некоторые html ресурсы ...

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...