特效描述：html5 canvas 太阳系 九大行星运行 动态图代码。html5 canvas这个动画加上了每个行星的名称，只要鼠标移入目标行星就会显示。
代码结构
1. HTML代码
你浏览器不支持
window.οnlοad=function(){
var oImg=new Image();
oImg.src="img.png";
oImg.offOn=false;
oImg.οnlοad=function(){
oImg.offOn=true;
};
/*行星数据存储*/
var planetData=[{
type:"mercury",
speed:100,
location:220,
r:100,
tw:222,
th:220,
sw:30,
sh:30,
num:100,
count:460,
fontShow:false
},{
type:"Venus",
speed:100,
location:440,
r:150,
tw:228,
th:228,
sw:36,
sh:36,
num:200,
count:560,
fontShow:false
},{
type:"earth",
r:220,
speed:100,
location:668,
tw:252,
th:252,
sw:40,
sh:40,
num:400,
count:760,
fontShow:false
},{
type:"Mars",
r:300,
speed:100,
location:920,
tw:275,
th:276,
sw:50,
sh:50,
num:500,
count:860,
fontShow:false
},{
type:"Jupiter",
r:380,
speed:100,
location:1654,
tw:480,
th:480,
sw:66,
sh:66,
num:600,
count:960,
fontShow:false
},{
type:"Saturn",
r:490,
speed:100,
location:2134,
tw:533,
th:376,
sw:70,
sh:55,
num:700,
count:1060,
fontShow:false
},{
type:"Uranus",
r:570,
speed:100,
location:1196,
tw:342,
th:458,
sw:46,
sh:55,
num:800,
count:1160,
fontShow:false
},{
type:"Neptune",
r:630,
speed:100,
location:0,
tw:220,
th:220,
sw:40,
sh:40,
num:900,
count:1260,
fontShow:false
}]
/*太阳字体显示变量*/
var sunShow=true;
/*画布开始*/
var oCas=document.getElementById("canvas");
var ctx=oCas.getContext("2d");
canvas.width=document.documentElement.clientWidth;
canvas.height=document.documentElement.clientWidth;
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
if(oImg.offOn){
/*太阳*/
ctx.drawImage(oImg,0,2510,750,750,(oCas.width-100)/2,(oCas.height-100)/2,100,100);
/*太阳字体显示*/
if(sunShow){
ctx.font="20px Arial";
ctx.fillStyle="#fff";
ctx.textAlign="center";
ctx.fillText("sun",oCas.width/2,oCas.height/2-50);
}
/*轨迹颜色*/
ctx.strokeStyle="rgba(0,153,255,.4)";
/*循环行星数据，绘制出行星*/
for(var i=0;i
planetData[i].num+=planetData[i].speed/planetData[i].r;
if(planetData[i].num>=planetData[i].count){
planetData[i].num=planetData[i].count-360;
}
ctx.beginPath();
ctx.arc(oCas.width/2,oCas.height/2,planetData[i].r,0,2*Math.PI);
ctx.stroke();
ctx.save();
ctx.translate(oCas.width/2,oCas.height/2);
ctx.rotate(planetData[i].num*Math.PI/180);
ctx.translate(planetData[i].r,0);
ctx.drawImage(oImg,0,planetData[i].location,planetData[i].tw,planetData[i].th,-planetData[i].sw/2,-planetData[i].sh/2,planetData[i].sw,planetData[i].sh);
ctx.beginPath();
ctx.fillStyle="rgba(0,0,0,.5)";
ctx.fillRect(0,-planetData[i].sh/2,planetData[i].sw/2,planetData[i].sh);
ctx.restore();
/*字体显示*/
if(planetData[i].fontShow){
var rx=oCas.width/2+planetData[i].r*Math.cos(planetData[i].num*Math.PI/180),
ry=oCas.height/2+planetData[i].r*Math.sin(planetData[i].num*Math.PI/180),
str=planetData[i].type,
sh=planetData[i].sh;
ctx.font="20px Arial";
ctx.fillStyle="#fff";
ctx.textAlign="center";
ctx.fillText(str,rx,ry-sh/2-10);
}
}
}
requestAnimationFrame(draw);
}
draw();
oCas.οnmοusemοve=function(ev){
ev=ev || window.event;
var x=ev.layerX || ev.offsetX;
var y=ev.layerY || ev.offsetY;
/*太阳字体显示*/
ctx.beginPath();
ctx.arc(oCas.width/2,oCas.height/2,50,0,2*Math.PI);
if(ctx.isPointInPath(x,y)){
for(var j=0;j
planetData[j].fontShow=false;
}
sunShow=true;
};
for(var i=0;i
/*八大行星字体显示判断*/
ctx.beginPath();
var rx=oCas.width/2+planetData[i].r*Math.cos(planetData[i].num*Math.PI/180),
ry=oCas.height/2+planetData[i].r*Math.sin(planetData[i].num*Math.PI/180),
str=planetData[i].type;
ctx.arc(rx,ry,planetData[i].sw/2,0,2*Math.PI);
if(ctx.isPointInPath(x,y)){
sunShow=false;
for(var j=0;j
planetData[j].fontShow=false;
}
switch(str){
case "mercury":
planetData[0].fontShow=true;
break;
case "Venus":
planetData[1].fontShow=true;
break;
case "earth":
planetData[2].fontShow=true;
break;
case "Mars":
planetData[3].fontShow=true;
break;
case "Jupiter":
planetData[4].fontShow=true;
break;
case "Saturn":
planetData[5].fontShow=true;
break;
case "Uranus":
planetData[6].fontShow=true;
break;
case "Neptune":
planetData[7].fontShow=true;
break;
}
}
}
}
}
var w = window;
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame;
