您的位置：首页 > Web前端 > HTML5

html5 太阳系（1）

2016-02-10 10:38 429 查看

<<!DOCTYPE html>
<html>
<head>
<title>太阳系</title>
<meta charset="utf-8">
</head>
<body>
<!--注意style里面的样式写法-->
<canvas id="mycanvas" width="1000" height="1000" style="background:#000;">
</canvas>
<script type="text/javascript">
var canvas = document.getElementById('mycanvas');
var cxt = canvas.getContext('2d');
var time = 0;  //time 应设为全局变量
function draw() {
//清除画布重新画(若不清除，转动的时候会有痕迹)
cxt.clearRect(0,0,1000,1000);
cxt.strokeStyle = "white";

//画太阳
cxt.beginPath();

//设置垂直渐变色(即放射状渐变)
var color = cxt.createRadialGradient(500,500,0,500,500,30);
color.addColorStop(0.3,"#f00");
color.addColorStop(1,"#f90");
cxt.fillStyle=color;
cxt.arc(500,500,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

//画轨道
cxt.beginPath();
cxt.arc(500,500,150,0,Math.PI*2,true);
cxt.closePath();
cxt.stroke();

//画地球(注意顺序问题)
cxt.save();
cxt.beginPath();
cxt.translate(500,500);//重置(0,0)点坐标
cxt.rotate(time*360/365*Math.PI/180);
cxt.arc(0,-150,20,0,360,false);
cxt.closePath();
//重置地球的颜色
var rgb = cxt.createRadialGradient(0,-150,0,0,-150,20);
rgb.addColorStop(0,"#78B1E8");
rgb.addColorStop(1,"#050C12");
cxt.fillStyle=rgb;
cxt.fill();
cxt.restore();
time+=1;
}
//让地球转起来(注意setInterval()的两种用法),运动是相对的，这里实现的是转画布
//setInterval("draw()",100);
setInterval(draw,10);

</script>

</body>
</html>

运行结果：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航