玩转html5(五)---月球绕着地球转,地球绕着太阳转
来源:互联网 发布:.moe 域名申请 编辑:程序博客网 时间:2024/04/27 14:10
关于运动速度的参数与真实速度有点差距,大家可以自行调整
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>地球绕着太阳转,月球绕着地球转</title></head><body> <canvas width="600" height="600" style="background:black"id="canvas"> 您的浏览器不支持canvas </canvas> <script> //获取画布 var canvas=document.getElementById('canvas'); //获取绘图环境 var cxt=canvas.getContext('2d'); //d单位时间time (1:1天) var time=0; function draw(){ //清除画布 cxt.clearRect(0,0,600,600); //画地球轨道 cxt.strokeStyle="#FFF"; cxt.beginPath(); //路径函数 cxt.arc(300,300,180,0,360,false); cxt.closePath(); cxt.stroke(); //画太阳 cxt.beginPath(); //路径函数 x,y,r,角度范围,顺时针/逆时针 cxt.arc(300,300,20,0,360,false); cxt.closePath(); //填充(渐变色) //cxt.createLinearGradient(内圆心x,内圆心y,内半径r,外圆心x,外圆心y,外圆半径r); var sunColor=cxt.createRadialGradient(300,300,0,300,300,10); sunColor.addColorStop(0,"#F00"); sunColor.addColorStop(1,"#F90"); cxt.fillStyle=sunColor; cxt.fill(); //画地球 cxt.save(); //异次元空间00点 cxt.translate(300,300); //旋转角度,地球公转一周需要365天,time=1转365/360度 cxt.rotate(time*365/360*Math.PI/180); //画球 cxt.beginPath(); cxt.arc(180,0,10,0,360,false); var earthColor=cxt.createRadialGradient(180,0,0,180,0,10); cxt.strokeStyle="#050c12"; earthColor.addColorStop(0,"#78B1Eb");//#&8B1Eb earthColor.addColorStop(1,"#050c12");//#050c12 cxt.fillStyle=earthColor; cxt.fill(); cxt.closePath(); //画月球轨道和月球 cxt.save(); /* 异次元空间00点,在前边的基础上,画地球时以(300,300)为中心,且未退出异次元空间 月球轨道以地球为中心,在异次元空间,地球为(180,0),这个地方我写错了,改了两个小时才改好 */ cxt.strokeStyle="#FFF"; cxt.translate(180,0); //画月球轨道 cxt.beginPath(); cxt.arc(0,0,30,0,360,false); cxt.stroke(); cxt.closePath(); //画月球 cxt.rotate(time*365*Math.PI/180); cxt.beginPath(); cxt.arc(30,0,5,0,360,false); var moonColor=cxt.createRadialGradient(30,0,0,30,0,5); cxt.strokeStyle="#322222"; moonColor.addColorStop(0,"#c0a48e"); moonColor.addColorStop(1,"#322222"); cxt.fillStyle=moonColor; cxt.fill(); cxt.closePath(); cxt.restore(); cxt.restore(); //每画一次图像,时间参数加1 time+=1; } draw(); //通过修改第二个参数课调整速度 setInterval(draw,50); </script></body></html>
0 0
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)
- C# Direct3D9开发实例一:月球绕着地球转
- [HTML5-SVG]使用svg、CSS3、raphaeljs:模拟月球绕地球,地球绕太阳旋转
- canvas 模拟地球绕太阳转动 月球绕地球转动
- openGL-----地球与太阳绕转代码
- OpenGL模拟太阳、地球、月球公转自转
- WPF太阳、地球、月球运动轨迹模拟
- OpenGL:太阳、地球、月球模型模拟动画
- C#+Direct3D9.0开发实例之月亮绕着地球转
- VS 平台下 OpenGL 实现地球、月球、太阳运动
- Canvas模拟太阳地球月球的运动过程
- 太阳自转 * 地球自转、公转 * 月球自转、公转
- 转--地球同步轨道、太阳同步轨道知识
- 计时器模仿地球绕太阳圆周运动
- 玩转html5 canvas
- 来自太阳和月球
- 玩转html5<canvas>画图
- java移动字符串显示位置
- linux下创建且挂载光盘镜像
- 部分游戏开发工具(转载)
- 黑马程序员-day19-装饰模式(Decorator)
- 反向代理服务器的工作原理
- 玩转html5(五)---月球绕着地球转,地球绕着太阳转
- 【OpenCV】绘制直方图
- 隐藏新浪博文左边栏相关博文,推荐博文方法 针对chrom,其他浏览器可参考
- 【ubuntu firefox】 Firefox is already running, but is not responding
- ADAMS安装的若干问题【解决方案】
- Nginx学习笔记1—Nginx(Win32) 配置详解
- 找到适合自己的网站模式
- 经纬财富:乌兰察布白银五种常见K线形态
- Nginx学习笔记2—Nginx(Win32) nginx.conf 中文详解