html5旋轉的太陽系動畫

2024-09-05 12:19:08

字體：大中小

來源：轉載

供稿：網友

HTML5 Canvas CSS3模擬實現旋轉的太陽系動畫，相當牛叉我覺得，以前有一個是CSS3寫的，各這個差不多，有興趣在本站網頁特效欄目搜索“CSS3太陽系星球效果圖”，各個星球圍著太陽旋轉，速度不一樣，有運動軌跡線，學習Canvas動畫的好范例。

<!doctype html><html><head><title>html5旋轉的太陽系動畫</title><meta charset="utf-8"></head><body><canvas id="canvas" width="1000" height="1000" style="background:#000">	</canvas><script>var cxt=document.getElementById('canvas').getContext('2d')function draw(){	for(var i=0;i<8;i++){		cxt.beginPath();		cxt.strokeStyle="gray";		cxt.closePath();		cxt.arc(500,500,(i+1)*50,0,360,false);		cxt.closePath();		cxt.stroke();	}}draw();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(){		cxt.save();		cxt.translate(500,500);		cxt.rotate(this.time*(360/this.cycle)*Math.PI/180);		cxt.beginPath();		cxt.arc(this.x,this.y,this.radius,0,360,false);		cxt.closePath();		this.color=cxt.createRadialGradient(this.x,this.y,0,this.x,this.y,this.radius);		this.color.addColorStop(0,this.scolor);		this.color.addColorStop(1,this.ecolor);		cxt.fillStyle=this.color;		cxt.fill();		cxt.restore();		this.time+=1;	}}	function Sun(){	Star.call(this,0,0,20,0,"#ff0000","#ff9900");}	var sun=new Sun();	function di(){		Star.call(this,0,-50,10,87,"#A69697","#5C3E40");	}	var di=new di();		function water(){		Star.call(this,0,-100,10,224.701,"#C4BBAC","#1F1315");	}	var water=new water();	function jin(){		Star.call(this,0,-150,10,365.2422,"#78B1E8","#050C12");	}	var jin=new jin();		function huo(){		Star.call(this,0,-200,10,686.98,"#CEC9B6","#76422D");	}	var huo=new huo();	function mu(){		Star.call(this,0,-250,10,4332.589,"#C0A48E","#322222");	}	var mu=new mu();	function tu(){		Star.call(this,0,-300,10,10759.5,"#F7F9E3","#5C4533");	}	var tu=new tu();	function hai(){		Star.call(this,0,-350,10,30799.095,"#A7E1E5","#19243A");	}	var hai=new hai();	function ming(){		Star.call(this,0,-400,10,164.8*365,"#0661B2","#1E3B73");	}	var ming=new ming();	function move(){	cxt.clearRect(0,0,1000,1000)	draw();	ming.draw();	sun.draw();	di.draw();	water.draw();	jin.draw();	huo.draw();	mu.draw();	tu.draw();	hai.draw();	}setInterval(move,10);</script></body></html>

上一篇：流行的標簽云JS+html代碼

下一篇：html5寫的時鐘圓形表盤

學習交流

如何查找有故障的配件

如何查找有故障的配件...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注