當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Canvas绘制星球轨迹移动

發布時間：2024/1/23 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Canvas绘制星球轨迹移动小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

視頻課堂https://edu.csdn.net/course/play/7621

在開發在線游戲時，繪制動畫是非常重要的。本節介紹一個使用Canvas API實現的動畫實例——小型太陽系模型，由地球、月球和太陽組成。在漆黑的夜空中，地球圍著太陽轉、月球圍繞地球轉.

p（1）定期繪圖，也就是每隔一段時間就調用繪圖函數進行繪圖。動畫當時多次繪圖實現的，一次繪圖只能實現靜態圖像。 p可以使用setInterval()方法設置一個定時器，語法如下：

setInterval(函數名,時間間隔)

p時間間隔的單位是ms，每經過指定的時間間隔系統都會自動調用指定的函數。 p（2）清除先前繪制的所有圖形。物體已經移動開來，可原來的位置上還保留先前繪制的圖形，這樣當然不行。解決這個問題最簡單的方法是使用clearRect方法清除畫布中的內容。?

p在設計小型太陽系模型動畫實例之前需要準備3個圖片分別用于表現地球、月球和太陽。本例的畫面比較小，因此這3個圖片不需要很精美。這里使用sun.png表現太陽、使用eartrh.png表現地球使用moon.png表現月球，圖它們保存在images目錄下? 在 JavaScript 代碼中定義 3 個 Image 對象，分別用于顯示 sun.png 、 eartrh.png 和 moon.png 。然后定義一個 init () 函數，初始化 Image 對象，并設置定時器，代碼如下

本例的背景就是漆黑的夜空，因此簡單地畫一個黑色的矩形就可以了

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><body><canvas id="canvas" width="500" height="500"></canvas><script>var sun=new Image();var earth=new Image();var moon=new Image();function init(){sun.src="img/sun.jpg";earth.src="img/earth.jpg";moon.src="img/moon.jpg";setInterval(draw,100);}function draw(){var c=document.getElementById("canvas");var ctx=c.getContext("2d");ctx.clearRect(0,0,500,500);ctx.fillStyle='rgba(0,0,0)';ctx.fillRect(0,0,500,500);ctx.save(); // //3繪制太陽；ctx.drawImage(sun,200,200,50,50);//4.繪制地球的軌道;ctx.strokeStyle='red';ctx.beginPath();ctx.arc(225,225,150,2*Math.PI,false);ctx.stroke();ctx.closePath();}window.addEventListener("load",init(),true);</script></body> </html>
步驟效果：

總結

以上是生活随笔為你收集整理的Canvas绘制星球轨迹移动的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。