請(qǐng)珍惜小編勞動(dòng)成果，該文章為小編原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處。
關(guān)于運(yùn)動(dòng)速度的參數(shù)與真實(shí)速度有點(diǎn)差距，大家可以自行調(diào)整
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>地球繞著太陽(yáng)轉(zhuǎn)，月球繞著地球轉(zhuǎn)</title>
</head>
<body><canvas width="600" height="600" style="background:black"id="canvas">您的瀏覽器不支持canvas</canvas><script>//獲取畫(huà)布var canvas=document.getElementById('canvas');//獲取繪圖環(huán)境var cxt=canvas.getContext('2d');//d單位時(shí)間time （1:1天）var time=0;function draw(){//清除畫(huà)布cxt.clearRect(0,0,600,600);//畫(huà)地球軌道cxt.strokeStyle="#FFF";cxt.beginPath();//路徑函數(shù)cxt.arc(300,300,180,0,360,false);cxt.closePath();cxt.stroke(); //畫(huà)太陽(yáng)cxt.beginPath();//路徑函數(shù) x,y,r,角度范圍,順時(shí)針/逆時(shí)針cxt.arc(300,300,20,0,360,false);cxt.closePath();//填充(漸變色)//cxt.createLinearGradient(內(nèi)圓心x,內(nèi)圓心y，內(nèi)半徑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();//畫(huà)地球cxt.save();//異次元空間00點(diǎn)cxt.translate(300,300);//旋轉(zhuǎn)角度,地球公轉(zhuǎn)一周需要365天，time=1轉(zhuǎn)365/360度cxt.rotate(time*365/360*Math.PI/180);//畫(huà)球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");//#&8B1EbearthColor.addColorStop(1,"#050c12");//#050c12cxt.fillStyle=earthColor;cxt.fill();cxt.closePath(); //畫(huà)月球軌道和月球cxt.save();/* 異次元空間00點(diǎn),在前邊的基礎(chǔ)上，畫(huà)地球時(shí)以（300,300）為中心，且未退出異次元空間月球軌道以地球?yàn)橹行?#xff0c;在異次元空間，地球?yàn)?#xff08;180,0），這個(gè)地方我寫(xiě)錯(cuò)了，改了兩個(gè)小時(shí)才改好 */cxt.strokeStyle="#FFF";cxt.translate(180,0);//畫(huà)月球軌道cxt.beginPath();cxt.arc(0,0,30,0,360,false);cxt.stroke();cxt.closePath(); //畫(huà)月球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();//每畫(huà)一次圖像，時(shí)間參數(shù)加1time+=1;}draw();//通過(guò)修改第二個(gè)參數(shù)課調(diào)整速度setInterval(draw,50);</script>
</body>
</html>
版權(quán)聲明：本文為博主原創(chuàng)文章，未經(jīng)博主允許不得轉(zhuǎn)載。
轉(zhuǎn)載于:https://www.cnblogs.com/dingxiaoyue/p/4931807.html
總結(jié)
以上是生活随笔為你收集整理的玩转html5(五)---月球绕着地球转，地球绕着太阳转（canvas实现，同样可以动哦）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
