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

 

你可能感兴趣的:(canvas)