设计地球和月球公转动画

最新推荐文章于 2022-06-02 16:18:39 发布

漂流の少年

最新推荐文章于 2022-06-02 16:18:39 发布

阅读量390

点赞数 2

分类专栏： HTML+CSS+JavaScript 文章标签： canvas js css

本文链接：https://blog.csdn.net/YINZHE__/article/details/116490122

版权

HTML+CSS+JavaScript 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

<!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>