您当前的位置： 首页 > 学无止境 > 心得笔记 网站首页心得笔记
雪饮的学习笔记-canvas实例2-太阳系1
发布时间：2015-06-02 20:43:51编辑：雪饮阅读（）
源码及注释：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<canvas id="canvas" width="1000" height="1000" style="background:#000;">
你的浏览器不支持canvas标签
</canvas>
<script type="text/javascript">
var canvas=document.getElementById("canvas");
//设置2d绘图环境
var cxt=canvas.getContext('2d');
var time=0;
function draw(){
//清除画布，防止地球旋转时有痕迹（边框痕迹）
cxt.clearRect(0,0,1000,1000);
//画轨道
//设置笔触颜色
cxt.strokeStyle="#fff";
cxt.beginPath();
cxt.arc(500,500,100,0,360,false);
cxt.stroke();//开始画
cxt.closePath();
//画太阳
cxt.beginPath();
cxt.arc(500,500,20,0,360,false);
//设置径向渐变，由内至外
var suncolor=cxt.createRadialGradient(500,500,0,500,500,20);
suncolor.addColorStop(0,"red");//渐变最小阀值为0
//可以有中间渐变suncolor.addColorStop(0.5,"blue");
suncolor.addColorStop(1,"pink");//渐变最大阀值为1
cxt.fillStyle=suncolor;
cxt.fill();
cxt.closePath();
//画地球
cxt.save();//保存当前环境
cxt.translate(500,500);//设置新的原点
//地球公转一周要365天，那么每天所转动的度数是360/365
cxt.rotate(time*(360/365)*Math.PI/180);//旋转新环境相对于原环境的角度
cxt.beginPath();
cxt.arc(0,-100,10,0,360,false);
//设置填充颜色（径向渐变）
var earthcolor=cxt.createRadialGradient(0,-100,0,0,-100,10);
earthcolor.addColorStop(0,"#78B1E8");
earthcolor.addColorStop(1,"#050C12");
cxt.fillStyle=earthcolor;
cxt.fill();
cxt.closePath();
cxt.restore();//回归原环境
time+=1;
}
setInterval(draw,10);
</script>
</body>
</html>
预览图：
关键字词：canvas实例2,太阳系1,个人博客