最近閒下來，開始了HTML5的入門之旅。跟着某視頻(避免廣告嫌疑)做了兩個簡單的canvas例子。此處爲簡易太陽系模型實例。
PS: 例子爲實驗性例子，歡迎批判~~~~
一、實現邏輯
1、畫出軌道，一共8個軌道(冥王星不算)
2、畫出星體，含太陽共9個星體
3、循環調用1、2步，使星體動起來。
二、代碼展示
1、效果圖
2、全部代碼如下
a. 簡單模式
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title> Canvas-太陽系 </title>
</head>
<body>
<canvas width="800" height="800" id="sunClass" style="background:black">您的瀏覽器不支持<code>canvas</code>標籤！</canvas>
<script>
//獲取畫布DOM
var dCanvas = document.getElementById('sunClass');
//設置繪圖環境.注意只能用小寫“2d”
var paper = dCanvas.getContext('2d');
var BX=400,BY=400;
var panletDef = 40;
var colorArr = [["#f00","#f90"],["#A69697","#5C3E40"],["#C4BBAC","#1F1315"],["#78B1E8","#050C12"],["#CEC9B6","#76422D"],["#C0A48E","#322222"],["#F7F9E3","#5C4533"],["#A7E1E5","#19243A"],["#0661B2","#1E3B73"]];
var timeUnit = 20;//時間基本數，毫秒 用於表示天
var timer = 0;//計數器，表示循環了多少個時間單位timeUnit
var scrollArr = [0,87.7,224.701,365.2422,686.98,4332.589,10759.5,30799.095,164.8*365];//太陽系各行星的公轉系數。 單位爲天
//畫圖
drawSunClass();
//啓動定時器
window.setInterval(drawSunClass,timeUnit);
/**
* 繪製太陽系
*
**/
function drawSunClass(){
paper.clearRect(0,0,900,900);
for(var i = 0; i<9; i++){
//1. 畫軌道
drawTrack(paper,i);
//2. 畫星體
drawCircleBall(paper,i,timer);
}
timer++;//計數器＋1
};
/**
* 畫軌道
*@param _paper HTMLCanvas2DContext 對象。通過canvas.getContext('2d')獲取
*@param order 次序，表示太陽系的行星序號。從太陽本身開始，越遠序號越大。
*
**/
function drawTrack(_paper,order){
if(typeof order == 'undefined') order = 0;
if(order > 0){
_paper.beginPath();
_paper.strokeStyle="#fff";
_paper.arc(BX,BY,panletDef*(order),0,360,false);
_paper.stroke();
_paper.closePath();
}
}
/**
* 畫星體
*@param _paper HTMLCanvas2DContext 對象。通過canvas.getContext('2d')獲取
*@param order 次序，表示太陽系的行星序號。從太陽本身開始，越遠序號越大。
*@param time 計數器，表示當前已過多少時間單位。
*
**/
function drawCircleBall(_paper,order,time){
if(typeof order == 'undefined') order = 0;
if(typeof time == 'undefined') time = 0;
var cirY = panletDef*order;
_paper.save();
_paper.translate(BX,BY);//重新設置(0,0)點的位置
if(order != 0){
_paper.rotate(time*2*Math.PI/scrollArr[order]);
}
_paper.beginPath();
_paper.arc(0,cirY,10,0,360,false);
//獲取徑向漸變對象
var fillColor = _paper.createRadialGradient(0,cirY,0,0,cirY,10);
fillColor.addColorStop(0,colorArr[order][0]);//指定漸變顏色
fillColor.addColorStop(1,colorArr[order][1]);//指定漸變顏色
_paper.fillStyle=fillColor;
_paper.fill();
_paper.closePath();
_paper.restore();
}
</script>
</body>
</html>
b. 對象模式
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312">
<title> Canvas-太陽系--js對象模式 </title>
</head>
<body>
<canvas width="800" height="800" id="sunClass" style="background:black">您的瀏覽器不支持<code>canvas</code>標籤！</canvas>
<script>
//獲取畫布DOM
var dCanvas = document.getElementById('sunClass');
//設置繪圖環境.注意只能用小寫“2d”
var paper = dCanvas.getContext('2d');
var BX=400,BY=400;//定義中心圓點位置
var panletDef = 40;//定義行星之間的距離
var timeUnit = 20;//時間基本數，毫秒 用於表示天
/**
* 畫軌道
*@param _paper HTMLCanvas2DContext 對象。通過canvas.getContext('2d')獲取
*@param order 次序，表示太陽系的行星序號。從太陽本身開始，越遠序號越大。
*
**/
function drawTrack(_paper,order){
if(typeof order == 'undefined') order = 0;
if(order > 0){
_paper.beginPath();
_paper.strokeStyle="#fff";
_paper.arc(BX,BY,panletDef*(order),0,360,false);
_paper.stroke();
_paper.closePath();
}
}
/**
* 創建星體類
*
**/
function Star(x,y,r,times,color){
this.x = x;
this.y = y;
this.r = r;
this.color = color;
this.timer = 0;
this.times = times;
this.draw = function (_paper){
_paper.save();
_paper.translate(BX,BY);//重新設置(0,0)點的位置
_paper.rotate(this.timer*2*Math.PI/times);
_paper.beginPath();
_paper.arc(this.x,this.y,this.r,0,360,false);
//獲取徑向漸變對象
this.fillColor = _paper.createRadialGradient(this.x,this.y,0,this.x,this.y,this.r);
this.fillColor.addColorStop(0,this.color[0]);//指定漸變顏色
this.fillColor.addColorStop(1,this.color[1]);//指定漸變顏色
_paper.fillStyle=this.fillColor;
_paper.fill();
_paper.closePath();
_paper.restore();
this.timer++;
}
}
/**
* 創建太陽構造函數
*
**/
var Sun = function (){
Star.call(this,0,0,10,0,["#f00","#f90"]);
}
/**
* 創建水星構造函數
*
**/
var Mercury = function (){
Star.call(this,0,-40,10,87.7,["#A69697","#5C3E40"]);
}
/**
* 創建金星構造函數
*
**/
var Venus = function (){
Star.call(this,0,-80,10,224.701,["#C4BBAC","#1F1315"]);
}
/**
* 創建地球構造函數
*
**/
var Earth = function (){
Star.call(this,0,-120,10,365.2422,["#78B1E8","#050C12"]);
}
/**
* 創建火星構造函數
*
**/
var Mars = function (){
Star.call(this,0,-160,10,686.98,["#CEC9B6","#76422D"]);
}
/**
* 創建木星構造函數
*
**/
var Jupiter = function (){
Star.call(this,0,-200,10,4332.589,["#C0A48E","#322222"]);
}
/**
* 創建土星構造函數
*
**/
var Saturn = function (){
Star.call(this,0,-240,10,10759.5,["#F7F9E3","#5C4533"]);
}
/**
* 創建天王星構造函數
*
**/
var Uranus = function (){
Star.call(this,0,-280,10,30799.095,["#A7E1E5","#19243A"]);
}
/**
* 創建海王星構造函數
*
**/
var Neptune = function (){
Star.call(this,0,-320,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 drawSunClass(){
//清空畫布
paper.clearRect(0,0,900,900);
for(var i = 0; i<9; i++){
//1. 畫軌道
drawTrack(paper,i);
}
//2. 畫星體
sun.draw(paper);
mercury.draw(paper);
venus.draw(paper);
earth.draw(paper);
mars.draw(paper);
jupiter.draw(paper);
saturn.draw(paper);
uranus.draw(paper);
neptune.draw(paper);
};
//第一次繪製星圖
drawSunClass();
//啓動定時器,循環繪製星圖
window.setInterval(drawSunClass,timeUnit);
</script>
</body>
</html>三、後記
1、代碼在FireFox 32.0.3上測試有效。