наведение мыши на анимированном холсте с помощью javascript

Я создаю эту простую программу, я только начал изучать JavaScript. так вот мой коднаведение мыши на анимированном холсте с помощью javascript

  <!DOCTYPE html> 
      <html> 
      <head> 
      <title>Canvas Test</title> 
      </head> 
      <body> 
      <section> 
       <div> 
        <canvas id="canvas" width="500" height="500"> 

        </canvas> 
       </div> 
      <script type="text/javascript"> 
      var canvas; 
      var ctx; 

      var x = 400; 
      var y = 300; 
      var dx = 2; 
      var dy = 4; 

      var a = 100; 
      var b = 200; 
      var da = 3; 
      var db = 5; 
      var WIDTH = 500; 
      var HEIGHT = 500; 

      function circle(x,y,r) { 
       ctx.beginPath(); 
       ctx.arc(x, y, r, 0, Math.PI*2, true); 
       ctx.fill(); 
      } 

      function rect(x,y,w,h) { 
       ctx.beginPath(); 
       ctx.rect(x,y,w,h); 
       ctx.closePath(); 
       ctx.fill(); 
      } 


      function clear() { 
       ctx.clearRect(0, 0, WIDTH, HEIGHT); 
      } 

      function init() { 
       canvas = document.getElementById("canvas"); 
       ctx = canvas.getContext("2d"); 
       return setInterval(draw, 10); 

      } 

       var c = Math.floor((Math.random()*WIDTH)+1); 
       var d = Math.floor((Math.random()*WIDTH)+1); 
       var e = Math.floor((Math.random()*WIDTH)+1); 
       var f = Math.floor((Math.random()*WIDTH)+1); 
       var g = Math.floor((Math.random()*WIDTH)+1); 
       var h = Math.floor((Math.random()*WIDTH)+1); 


       var dc = Math.floor((Math.random()*6)+1); 
       var dd = Math.floor((Math.random()*8)+1); 
       var de = Math.floor((Math.random()*7)+1); 
       var df = Math.floor((Math.random()*5)+1); 
       var dg = Math.floor((Math.random()*6)+1); 
       var dh = Math.floor((Math.random()*4)+1); 

      var enTimer = null; 
      function draw() { 
       clearInterval(enTimer); 


       ctx.fillStyle = "#FAF7F8"; 
       rect(0,0,WIDTH,HEIGHT); 
       ctx.fillStyle = "#F00"; 
       circle(x, y, 10); 

       ctx.fillStyle = "#0772A1"; 
       circle(a, d, 20); 

       ctx.fillStyle = "#00BB3F"; 
       circle(a, b, 30); 

       ctx.fillStyle = "#FB0"; 
       circle(c, d, 15); 

       ctx.fillStyle = "#E7003E"; 
       circle(c, y, 25); 

       ctx.fillStyle = "#FF7400"; 
       circle(e, f, 10); 

       ctx.fillStyle = "#98ED00"; 
       circle(g, h, 25); 

       ctx.fillStyle = "#3016B0"; 
       circle(e, h, 30); 

       ctx.fillStyle = "#8C04A8"; 
       circle(g, f, 15); 

       ctx.fillStyle = "#009D91"; 
       circle(x, f, 30); 

       if (x + dx > WIDTH || x + dx < 0) 
       dx = -dx; 
       if (y + dy > HEIGHT || y + dy < 0) 
       dy = -dy; 

      if (a + da > WIDTH || a + da < 0) 
       da = -da; 
       if (b + db > HEIGHT || b + db < 0) 
       db = -db; 

       if (c + dc > WIDTH || c + dc < 0) 
       dc = -dc; 
       if (d + dd > HEIGHT || d + dd < 0) 
       dd = -dd; 

        if (e + de > WIDTH || e + de < 0) 
       de = -de; 
       if (f + df > HEIGHT || f + df < 0) 
       df = -df; 

        if (g + dg > WIDTH || g + dg < 0) 
       dg = -dg; 
       if (h + db > HEIGHT || h + db < 0) 
       dh = -dh; 
      /* 
       if(ctx.onmouseover = 1){ 
         x += 0; 
       y += 0; 
       a += 0; 
       b += 0; 

       c += 0; 
       d += 0; 

       e += 0; 
       f += 0; 

       g += 0; 
       h += 0; 
       } 
       else if(ctx.onmouseout = 0){*/ 
       x += dx; 
       y += dy; 
       a += da; 
       b += db; 

       c += dc; 
       d += dd; 

       e += de; 
       f += df; 

       g += dg; 
       h += dh; 
      //} 
        var interval = getRand(200000, 000); 
        enTimer = setInterval(addEnemy, interval); 
      } 

      init(); 
      function pause() { 
       clearInterval(enTimer); 


       ctx.fillStyle = "#FAF7F8"; 
       rect(0,0,WIDTH,HEIGHT); 
       ctx.fillStyle = "#F00"; 
       circle(x, y, 10); 

       ctx.fillStyle = "#0772A1"; 
       circle(a, d, 20); 

       ctx.fillStyle = "#00BB3F"; 
       circle(a, b, 30); 

       ctx.fillStyle = "#FB0"; 
       circle(c, d, 15); 

       ctx.fillStyle = "#E7003E"; 
       circle(c, y, 25); 

       ctx.fillStyle = "#FF7400"; 
       circle(e, f, 10); 

       ctx.fillStyle = "#98ED00"; 
       circle(g, h, 25); 

       ctx.fillStyle = "#3016B0"; 
       circle(e, h, 30); 

       ctx.fillStyle = "#8C04A8"; 
       circle(g, f, 15); 

       ctx.fillStyle = "#009D91"; 
       circle(x, f, 30); 

       if (x + dx > WIDTH || x + dx < 0) 
       dx = -dx; 
       if (y + dy > HEIGHT || y + dy < 0) 
       dy = -dy; 

      if (a + da > WIDTH || a + da < 0) 
       da = -da; 
       if (b + db > HEIGHT || b + db < 0) 
       db = -db; 

       if (c + dc > WIDTH || c + dc < 0) 
       dc = -dc; 
       if (d + dd > HEIGHT || d + dd < 0) 
       dd = -dd; 

        if (e + de > WIDTH || e + de < 0) 
       de = -de; 
       if (f + df > HEIGHT || f + df < 0) 
       df = -df; 

        if (g + dg > WIDTH || g + dg < 0) 
       dg = -dg; 
       if (h + db > HEIGHT || h + db < 0) 
       dh = -dh; 


         x += 0; 
       y += 0; 
       a += 0; 
       b += 0; 

       c += 0; 
       d += 0; 

       e += 0; 
       f += 0; 

       g += 0; 
       h += 0; 
        var interval = getRand(200000, 000); 
        enTimer = setInterval(addEnemy, interval); 
      } 

      </script> 

      </section> 
      </body> 
      </html>

что я хочу, когда я парить холст анимация остановится, и когда я зависать из анимации будет играть, я попытался положить OnMouseOver и onmouseout, но он не работает

использование PS Javascript только, нет библиотеки JQuery

источник

2013-10-11 I am L

вы можете создать [скрипку демо] (http://jsfiddle.net) этого? – Ibu

здесь http://jsfiddle.net/lightblue/ADTd9/ –

Вы почти нет его ...

Убедитесь, что таймер в Init() является публичным:

function init() { 
    canvas = document.getElementById("canvas"); 
    ctx = canvas.getContext("2d"); 
    enTimer=setInterval(draw, 10); 

}

Добавьте несколько слушателей событий, которые убивают таймер на наведении курсора мыши и создать новый таймер на отведении указателя мыши:

// listen for mouseover on the canvas 

canvas.addEventListener("mouseover",doMouseOver,false); 

// listen for mouseout from the canvas 

canvas.addEventListener("mouseout",doMouseOut,false); 


// on mouseover, clear the timer 

function doMouseOver(){ 
    clearInterval(enTimer); 
} 


// on mouseout, start another timer 

function doMouseOut(){ 
    var interval = getRand(200000, 000); // or make interval public to make it reusable 
    enTimer = setInterval(addEnemy, interval); 
}

источник

2013-10-11 18:27:13 markE

наведение мыши на анимированном холсте с помощью javascript

ответ

Смежные вопросы