canvas 圆绕某一中心做匀速圆周运动和变速圆周运动

最新推荐文章于 2020-08-27 11:03:33 发布

dianduojun4157

最新推荐文章于 2020-08-27 11:03:33 发布

阅读量379

点赞数

原文链接：http://www.cnblogs.com/rongwei/p/4487830.html

版权

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

转载于:https://www.cnblogs.com/rongwei/p/4487830.html

dianduojun4157

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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="myC...
复制链接

扫一扫