玩转html5(五)---月球绕着地球转,地球绕着太阳转(canvas实现,同样可以动哦)...

请珍惜小编劳动成果,该文章为小编原创,转载请注明出处。


关于运动速度的参数与真实速度有点差距,大家可以自行调整


<!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>


版权声明:本文为博主原创文章,未经博主允许不得转载。

转载于:https://www.cnblogs.com/dingxiaoyue/p/4931807.html

  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,这是一个比较复杂的问题,需要绘制三个不同大小的球体,并模拟它们之间的运关系。以下是一个基本的实现思路: 1. 创建一个画布,并设置一个黑色背景。 2. 绘制太阳,可以使用 `fillStyle` 属性设置为黄色,并使用 `arc` 方法绘制一个圆形。 3. 绘制地球,可以使用 `fillStyle` 属性设置为蓝色,并使用 `arc` 方法绘制一个圆形。 4. 绘制月球,可以使用 `fillStyle` 属性设置为灰色,并使用 `arc` 方法绘制一个圆形。 5. 计算地球月球的初始位置,并以太阳为中心绘制它们。 6. 创建一个函数,用于更新地球月球的位置,可以使用三角函数计算它们的坐标。 7. 使用 `requestAnimationFrame` 方法循环调用更新函数,实现态效果。 以下是一个简单的示例代码,可以根据需要进行修改和优化: ```html <canvas id="canvas" width="600" height="600"></canvas> ``` ```javascript const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const sunRadius = 50; const earthRadius = 20; const moonRadius = 10; let earthAngle = 0; let moonAngle = 0; function draw() { ctx.fillStyle = 'black'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 绘制太阳 ctx.fillStyle = 'yellow'; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, sunRadius, 0, Math.PI * 2); ctx.fill(); // 计算地球坐标 const earthX = canvas.width / 2 + Math.cos(earthAngle) * (sunRadius + 100); const earthY = canvas.height / 2 + Math.sin(earthAngle) * (sunRadius + 100); // 绘制地球 ctx.fillStyle = 'blue'; ctx.beginPath(); ctx.arc(earthX, earthY, earthRadius, 0, Math.PI * 2); ctx.fill(); // 计算月球坐标 const moonX = earthX + Math.cos(moonAngle) * (earthRadius + 50); const moonY = earthY + Math.sin(moonAngle) * (earthRadius + 50); // 绘制月球 ctx.fillStyle = 'gray'; ctx.beginPath(); ctx.arc(moonX, moonY, moonRadius, 0, Math.PI * 2); ctx.fill(); // 更新地球月球角度 earthAngle += 0.01; moonAngle += 0.05; requestAnimationFrame(draw); } draw(); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值