canvas 模拟地球绕太阳转动 月球绕地球转动
来源:互联网 发布:年轻人理财软件 编辑:程序博客网 时间:2024/04/27 18:56
requestAnimationFrame,Web中写动画的另一种选择
HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了:
你可以用CSS3的animattion+keyframes;
你也可以用css3的transition;
你还可以用通过在canvas上作图来实现动画,也可以借助jQuery动画相关的API方便地实现;
当然最原始的你还可以使用window.setTimout()或者window.setInterval()通过不断更新元素的状态位置等来实现动画,前提是画面的更新频率要达到每秒60次才能让肉眼看到流畅的动画效果。
现在又多了一种实现动画的方案,那就是还在草案当中的window.requestAnimationFrame()方法。
window.requestAnimationFrame方法
来看MDN上对其给出的诠释:
window.requestAnimationFrame() 将告知浏览器你马上要开始动画效果了,后者需要在下次动画前调用相应方法来更新画面。这个方法就是传递给window.requestAnimationFrame()的回调函数。
也可这个方法原理其实也就跟setTimeout/setInterval差不多,通过递归调用同一方法来不断更新画面以达到动起来的效果,但它优于setTimeout/setInterval的地方在于它是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。
基本语法
可以直接调用,也可以通过window来调用,接收一个函数作为回调,返回一个ID值,通过把这个ID值传给window.cancelAnimationFrame()可以取消该次动画。
window.requestAnimationFrame(move);//move为回调函数
arc()方法:
arc(x,y,radius,x1,y2,false) 六个参数 x,y 圆心的坐标 , radius 圆的半径,x1为其实弧度,y1为终止弧度,如果画圆 x1 = 0,y1 = 2*Math.PI, 最后一个参数画圆的方向,有两个值 false (顺时针)和 true (逆时针)。
clearRect() 方法:
clearRect(x,y,w,h) 四个参数 x,y 为要清除位置的起始坐标, w,h 为要清除的宽高
开始画圆
画太阳,地球,月球的过程都是用 canvas 画圆,因为它们除了 圆心坐标和半径不一样以为 ,其他过程都是一样的,所以我将画圆的方法封装起来,在画的时候给不同的参数来调用这个类
封装类
function Point(x,y){this.x = x; //圆心的 X 坐标this.y = y; //圆心的 Y 坐标}function Circle(origin,radius,speed){this.origin = origin; //圆心this.radius = radius; //半径this.speed = speed; //转动速度this.draw = drawCircle; //画圆的方法}function drawCircle(){con.beginPath(); //开始绘制con.arc(this.origin.x,this.origin.y,this.radius,0,2*Math.PI,false); //绘制圆con.stroke(); //绘制的框con.closePath(); //绘制结束}
画太阳,地球,月亮
这里只需要调用前面封装好的类,传入参数即可
//画太阳var sun = new Circle(new Point(400,300),30,0);sun.draw();//画地球轨迹var earthPath = new Circle(sun.origin,200,0);earthPath.draw();//画地球var earth = new Circle(new Point(earthPath.origin.x + earthPath.radius, earthPath.origin.y),20,0);earth.draw();//画月亮轨迹var moonPath = new Circle(earth.origin,80,0);moonPath.draw();//画月亮var moon = new Circle(new Point(moonPath.origin.x + moonPath.radius, moonPath.origin.y),10,0);moon.draw();
让地球和月亮转动起来
function move(){ con.clearRect(0,0,canvas.width,canvas.height); sun.draw(); earthPath.draw(); moonPath.draw(); earth.draw(); moon.draw(); earth.origin.x = earthPath.origin.x + earthPath.radius * Math.cos(earth.speed); earth.origin.y = earthPath.origin.y + earthPath.radius * Math.sin(earth.speed); earth.speed += 0.02; moon.origin.x = moonPath.origin.x + moonPath.radius * Math.cos(moon.speed); moon.origin.y = moonPath.origin.y + moonPath.radius * Math.sin(moon.speed); moon.speed += -0.05; window.requestAnimationFrame(move);} move();
效果图:
画面虽然简单了点 ,但转动的效果还是可以看见的
完整代码:
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> canvas {border: 1px solid black;} </style> </head> <body> <canvas id="myCanvas" width="800" height="600"></canvas> </body> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var con = canvas.getContext('2d'); function Point(x,y){ this.x = x; //圆心的 X 坐标 this.y = y; //圆心的 Y 坐标 } function Circle(origin,radius,speed){ this.origin = origin; //圆心 this.radius = radius; //半径 this.speed = speed; //转动速度 this.draw = drawCircle; //画圆的方法 } function drawCircle(){ con.beginPath(); //开始绘制 con.arc(this.origin.x,this.origin.y,this.radius,0,2*Math.PI,false); //绘制圆 con.stroke(); //绘制的框 con.closePath(); //绘制结束 } //画太阳 var sun = new Circle(new Point(400,300),30,0); sun.draw(); //画地球轨迹0 var earthPath = new Circle(sun.origin,200,0); earthPath.draw(); //画地球 var earth = new Circle(new Point(earthPath.origin.x + earthPath.radius, earthPath.origin.y),20,0); earth.draw(); //画月亮轨迹 var moonPath = new Circle(earth.origin,80,0); moonPath.draw(); //画月亮 var moon = new Circle(new Point(moonPath.origin.x + moonPath.radius, moonPath.origin.y),10,0); moon.draw(); function move(){ con.clearRect(0,0,canvas.width,canvas.height); sun.draw(); earthPath.draw(); moonPath.draw(); earth.draw(); moon.draw(); earth.origin.x = earthPath.origin.x + earthPath.radius * Math.cos(earth.speed); earth.origin.y = earthPath.origin.y + earthPath.radius * Math.sin(earth.speed); earth.speed += 0.02; moon.origin.x = moonPath.origin.x + moonPath.radius * Math.cos(moon.speed); moon.origin.y = moonPath.origin.y + moonPath.radius * Math.sin(moon.speed); moon.speed += -0.05; window.requestAnimationFrame(move); } move(); </script></html>
- canvas 模拟地球绕太阳转动 月球绕地球转动
- canvas简单模拟太阳地球月亮的转动
- Canvas模拟太阳地球月球的运动过程
- [HTML5-SVG]使用svg、CSS3、raphaeljs:模拟月球绕地球,地球绕太阳旋转
- Canvas模拟地球,月球公转
- OpenGL模拟太阳、地球、月球公转自转
- WPF太阳、地球、月球运动轨迹模拟
- OpenGL:太阳、地球、月球模型模拟动画
- 【重点突破】——two.js模拟绘制太阳月亮地球转动
- 转动的地球
- 2.转动的地球shader
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转
- [OpenGL]使用简单的视角变化实现太阳和地球的转动
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)
- 使用纯 CSS3 动画实现地球转动
- Canvas之太阳与地球
- 计时器模仿地球绕太阳圆周运动
- openGL-----地球与太阳绕转代码
- POJ3299 (借助改变的初始变量,得知进入哪种情况)
- 程序设计基础(C&C++) 戴波、张东祥 第二章 数据类型与表达式 编程作业
- [Javascript]Sublime Text 3相关设置
- cx_sy_dyn_call_illegal_type
- XML文档的xmlns、xmlns:xsi和xsi:schemaLocation之间的区别
- canvas 模拟地球绕太阳转动 月球绕地球转动
- 【设计模式系列】--原型模式
- Python爬虫之路
- {题解}[jzoj4823] 【NOIP2016提高A组集训第1场10.29】小W学物理
- Lightoj 1038(求期望)
- iOS 第13课 使用XIB可视化编辑界面
- Overload和Override的区别。Overloaded的方法是否可以改变返回值的类型?
- Win10-64位Python2.7 Django开发与应用(一)
- LeetCode------54. Spiral Matrix(螺旋二维矩阵)-----59. Spiral Matrix II(n的螺旋矩阵)