设计地球和月球公转动画
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设计地球和月球公转动画相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
var sun = new Image(); //创建Image对象
var moon = new Image();
var earth = new Image();
sun.src = 'images/Canvas_sun.png'; //设置图像路径
moon.src = 'images/Canvas_moon.png';
earth.src = 'images/Canvas_earth.png';
window.requestAnimationFrame(draw); //告诉浏览器希望执行动画，并调用draw函数
function draw(){
var ctx = document.getElementById('canvas').getContext('2d');
ctx.globalCompositeOperation = 'destination-over'; //原有内容覆盖在新图形之上(图形合成属性)
ctx.clearRect(0,0,300,300); //清空画布
ctx.fillStyle = 'rgba(0,0,0,0.4)'; //设置图形的填充颜色和透明度
ctx.strokeStyle = 'rgba(0,153,255,0.4)';//设置图形轮廓的颜色
ctx.save(); //保存当前画布的状态，将状态送入栈中(栈的特点：现进后出)
ctx.translate(150,150); //移动坐标原点，dx=150,dy=150
// Earth(1分钟公转一圈)
var time = new Date();
ctx.rotate( ((2*Math.PI)/60)*time.getSeconds() + ((2*Math.PI)/60000)*time.getMilliseconds() );
//旋转canvas对象的坐标空间,getSeconds()用来获取当前秒数,getMilliseconds()用来获取当前毫秒数(0-999)
ctx.translate(105,0); //移动坐标原点，dx=150,dy=0,始终保持坐标系原点离画布中心(也就是太阳中心)为105
ctx.fillRect(0,-12,50,24); //绘制阴影
ctx.drawImage(earth,-12,-12); //绘制地球
// Moon(1分钟公转一圈)
ctx.save();
ctx.rotate( ((2*Math.PI)/6)*time.getSeconds() + ((2*Math.PI)/6000)*time.getMilliseconds() );
ctx.translate(0,28.5);
ctx.drawImage(moon,-3.5,-3.5); //绘制月球
ctx.restore(); //之前save了两次所以要restore两次
ctx.restore();
ctx.beginPath(); //开始生成路径
ctx.arc(150,150,105,0,Math.PI*2,false); //描述地球公转轨道路径，原点(150,150)，半径：105，顺时针绘制
ctx.stroke(); //开始沿路径绘制
ctx.drawImage(sun,0,0,300,300); //绘制太阳，图像左上顶点在画布中的位置:(0,0)，要使用图像的宽度：300，高度：300
window.requestAnimationFrame(draw);
}
</script>
</body>
</html>
要用到的三张图片：
Canvas_sun.png(宽高都是300px)
Canvas_earth.png(宽高都是40px)
Canvas_moon.png(宽高都是7px)
以上是关于设计地球和月球公转动画的主要内容，如果未能解决你的问题，请参考以下文章