HTML5的Canvas画图模拟太阳系运转
生活随笔
收集整理的這篇文章主要介紹了
HTML5的Canvas画图模拟太阳系运转
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
今天研究的是利用HTML5的Canvas畫圖來模擬太陽系運轉，首先，在這個太陽系里分為畫軌道和畫星球兩個部分，
對于每一個星球我們要知道它的顏色和公轉周期，如下圖。
?
?
采用面向對象編程的思想，代碼如下
?
stars.html
<!DOCTYPE HTML><html><head></head><body><canvas id="canvas" width="1000" height="1000" style="background:#000">你的瀏覽器不支持canvas標簽！</canvas><script src="stars.js"></script></body> </html>?
stars.js
/******************************************/ /* */ /* 本節代碼體現了用JavaScript編寫面向對 */ /* 象程序的思想，希望能認真閱讀理解。 */ /* */ /******************************************///設置2d繪圖環境 var ctx = document.getElementById("canvas").getContext("2d");//畫軌道 function drawTrack(){for(var i = 0; i < 8; i++){ctx.beginPath();ctx.arc(500, 500, (i + 1) * 50, 0, 360, false);ctx.closePath();ctx.strokeStyle = "#fff";ctx.stroke();} }//畫星球的類 function Star(x, y, radius, cycle, sColor, eColor){//設置星球類的屬性this.x = x; //星球的坐標點this.y = y;this.radius = radius; //星球的半徑this.cycle = cycle; //設置周期this.sColor = sColor; //星球的顏色，起始顏色和結束顏色this.eColor = eColor;this.color = null;//設置一個計時器this.time = 0;//給星球類定義一個方法this.draw = function(){ctx.save(); //保存之前的內容ctx.translate(500, 500); //重置0，0坐標 ctx.rotate(this.time * (360 / this.cycle) * Math.PI / 180); //旋轉角度//畫星球ctx.beginPath();ctx.arc(this.x, this.y, this.radius, 0, 360, false);ctx.closePath();//設置星球的填充顏色this.color = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);this.color.addColorStop(0, this.sColor);this.color.addColorStop(1, this.eColor);ctx.fillStyle = this.color;ctx.fill();//恢復之前畫布的內容ctx.restore();this.time += 1;} }//創建一個太陽的構造函數 function Sun(){Star.call(this, 0, 0, 20, 0, "#FFFF00", "#FF9900"); }//創建一個水星的構造函數 function Mercury(){Star.call(this, 0, -50, 10, 87.70, "#A69697", "#5C3E40"); }//創建一個金星的構造函數 function Venus(){Star.call(this, 0, -100, 10, 224.701, "#C4BBAC", "#1F1315"); }//創建一個地球的構造函數 function Earth(){Star.call(this, 0, -150, 10, 365.2422, "#78B1E8", "#050C12"); }//創建一個火星的構造函數 function Mars(){Star.call(this, 0, -200, 10, 686.98, "#CEC9B6", "#76422D"); }//創建一個木星的構造函數 function Jupiter(){Star.call(this, 0, -250, 10, 4332.589, "#C0A48E", "#322222"); } //創建一個土星的構造函數 function Saturn(){Star.call(this, 0, -300, 10, 10759.5, "#F7F9E3", "#5C4533"); } //創建一個天王星的構造函數 function Uranus(){Star.call(this, 0, -350, 10, 30799.095, "#A7E1E5", "#19243A"); } //創建一個海王星的構造函數 function Neptune(){Star.call(this, 0, -400, 10, 60152, "#0661B2", "#1E3B73"); }var sun = new Sun(); var mercury = new Mercury(); var venus = new Venus(); var earth = new Earth(); var mars = new Mars(); var jupiter = new Jupiter(); var saturn = new Saturn(); var uranus = new Uranus(); var neptune = new Neptune();function Move(){ctx.clearRect(0, 0, 1000, 1000);drawTrack();sun.draw();mercury.draw();venus.draw();earth.draw();mars.draw();jupiter.draw();saturn.draw();uranus.draw();neptune.draw(); }setInterval(Move,10);
?
運行效果：
?
?
?
總結
以上是生活随笔為你收集整理的HTML5的Canvas画图模拟太阳系运转的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： PIL模块与随机生成中文验证码
- 下一篇： 每一个正整数可以表示为3个三角形数之和