玩轉html5(五)---月球繞著地球轉，地球繞著太陽轉（canvas實現，同樣可以動哦）

最後更新：2014-05-15 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

關於運動速度的參數與真實速度有點差距，大家可以自行調整

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

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More