canvas円はある中心を回って等速円周運動と変速円周運動をします.

18734 ワード

canvas

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4   <meta charset="utf-8">

 5   <title>JS Bin</title>

 6 </head>

 7 <body>

 8   <canvas id="myCanvas" width="1000px" height="800px" style="background:yellow"></canvas>

 9 </body>

10 </html>

 1 var myCanvas = document.getElementById('myCanvas');

 2 var myContext = myCanvas.getContext('2d');

 3 var rx = 500,  //x  

 4     ry = 300,  //y  

 5     radius = 100,   //    

 6     w = (1/2)*Math.PI,  //   ，（1/2）    

 7     r = 0,     //   

 8     t = new Date();    //    

 9 

10 

11 var reDraw = function(){

12   var tt = new Date();

13   T = (tt - t) / 1000; //    

14   t = tt;

15   

16   myContext.clearRect(0,0,1000,800);

17   

18   myContext.save();

19   

20   r += w * T; //    

21   x = rx +　radius * Math.sin(r);

22   y = ry　+ (radius - radius * Math.cos(r));

23   myContext.moveTo(x, y);

24   

25   myContext.beginPath();

26   myContext.arc(x, y, 50, 0, 2*Math.PI);

27   myContext.closePath();

28   myContext.stroke();

29   

30   myContext.restore();

31   window.requestAnimationFrame(arguments.callee);

32 };

33 

34 window.requestAnimationFrame(reDraw);

上は均等速円周運動で、下は変速円周運動で、HTMLコードは同じです.jsだけがいくつかの修正をしました.

 1 var myCanvas = document.getElementById('myCanvas');

 2 var myContext = myCanvas.getContext('2d');

 3 var rx = 500,  //x  

 4     ry = 300,  //y  

 5     radius = 100,   //    

 6     w0 = (1/4)*Math.PI,  //    ，（1/4）    

 7     a = 5, //    

 8     r = 0,     //   

 9     t = new Date();    //    

10 

11 

12 var reDraw = function(){

13   var tt = new Date();

14   var T = (tt - t) / 1000;

15   var w = w0 + a * T;

16   

17   myContext.clearRect(0,0,1000,800);

18   

19   myContext.save();

20   

21   r = w * T + (1/2)*a*T*T; //    

22   x = rx +　radius * Math.sin(r);

23   y = ry　+ (radius - radius * Math.cos(r));

24   myContext.moveTo(x, y);

25   

26   myContext.beginPath();

27   myContext.arc(x, y, 50, 0, 2*Math.PI);

28   myContext.closePath();

29   myContext.stroke();

30   

31   myContext.restore();

32   window.requestAnimationFrame(arguments.callee);

33 };

34 

35 window.requestAnimationFrame(reDraw);

一定値に加速すると減速運動になり、一定値に減速すると加速運動になります.

 1 var myCanvas = document.getElementById('myCanvas');

 2 var myContext = myCanvas.getContext('2d');

 3 var rx = 500,  //x  

 4     ry = 300,  //y  

 5     radius = 100,   //    

 6     w0 = (1/4)*Math.PI,  //    ，（1/4）    

 7     a = 3, //    

 8     r = 0,     //   

 9     t = new Date();   //    

10      

11 

12 var reDraw = function() {

13   var tt = new Date();

14   var T = (tt - t) / 1000;

15   t = tt;

16   var mw = w0 + a * T; //            

17   w = (w0 + mw) / 2; //      

18   w0 = mw;

19   if ((w0 > Math.PI) || (w0 < (1/4)*Math.PI)) {

20     a = -a;

21   }

22   

23   myContext.clearRect(0,0,1000,800);

24   

25   myContext.save();

26   

27   r += w * T; //    

28   x = rx +　radius * Math.sin(r);

29   y = ry　+ (radius - radius * Math.cos(r));

30   myContext.moveTo(x, y);

31   

32   myContext.beginPath();

33   myContext.arc(x, y, 50, 0, 2*Math.PI);

34   myContext.closePath();

35   myContext.stroke();

36   

37   myContext.restore();

38   window.requestAnimationFrame(arguments.callee);

39 };

40 

41 window.requestAnimationFrame(reDraw);

みんなは発見しましたか?他のサイトを見てからこのページに戻ってきたら、運動が変わって、速度がとても速くなりました.これはほかのページを見て帰ってきたら、時間の間隔が大きくなります.運動速度がとても大きいです.何とかしてこの問題を解決したいです.
http://www.webhek.com/page-visibility/を選択します

var myCanvas = document.getElementById('myCanvas');

var myContext = myCanvas.getContext('2d');



var rx = 500,  //x  

    ry = 300,  //y  

    radius = 100,   //    

    w0 = (1/4)*Math.PI,  //    ，（1/4）    

    a = 5, //    

    r = 0,     //   

    t = new Date();   //    



var visibilityChange;

if (typeof document.hidden !== "undefined") {

    visibilityChange = "visibilitychange";

} else if (typeof document.mozHidden !== "undefined") {

    visibilityChange = "mozvisibilitychange";

} else if (typeof document.msHidden !== "undefined") {

    visibilityChange = "msvisibilitychange";

} else if (typeof document.webkitHidden !== "undefined") {

    visibilityChange = "webkitvisibilitychange";

}





var reDraw = function() {

  var tt = new Date();

  var T = (tt - t) / 1000;

  t = tt;

  var wm = w0 + a * T,

      w = (wm + w0) / 2;

  w0 = wm;

  

  if ((w0 > 2*Math.PI) || (w0 < (1/4)*Math.PI)) {

    a = -a;

  }

  

  myContext.clearRect(0,0,1000,800);

  

  myContext.save();

  

  r += w * T; //    

  x = rx +　radius * Math.sin(r);

  y = ry　+ (radius - radius * Math.cos(r));

  myContext.moveTo(x, y);

  

  myContext.beginPath();

  myContext.arc(x, y, 50, 0, 2*Math.PI);

  myContext.closePath();

  myContext.stroke();

  

  myContext.restore();

  window.requestAnimationFrame(arguments.callee);

};



window.requestAnimationFrame(reDraw);



document.addEventListener(visibilityChange, function() {

    t = new Date();

}, false);

JS配列のエルゴード方式forサイクルとfor…in