canvas--动画日，月，地实时运转案例

最新推荐文章于 2022-05-07 09:29:36 发布

努力的豌豆芽

最新推荐文章于 2022-05-07 09:29:36 发布

阅读量1k

点赞数

文章标签： canvas js

本文链接：https://blog.csdn.net/qq_44758643/article/details/108754715

版权

模拟日月地运转案例

本案例将运用canvas动画技术来实现模拟日，月，地星球公转的案例

首先声明三个图片对象

案例思路

init（）函数中：

这个函数是启动函数他用来启动和设置一些变量

1.给三个图片对象赋值

2.调用动画函数让其执行draw（）函数中的内容

draw()函数中：

此函数主要进行画布的绘制

1.定义覆盖原则目的是为了让月球运行到地球阴影部分时可以在阴影后面绘制

2.设置填充颜色为的是一会儿绘制地球的阴影部分，设置轮廓颜色为的是一会儿绘制地球的轨道

3.将当前状态保存到盏中（想象你玩游戏时候的存档）

注意这里存了一次档

4.将画布的原地移动到150,150位置上就是以太阳为0,0点

5.创建时间对象方便一会儿设置旋转的角度

6.设置旋转让画布围绕着画布原地（注意这里的原点是移动后的就是150,150那个点）旋转的值是获取当前时间所计算的角度值

7.然后再次移动原点将其移动到地球的位置

8.绘制一个影子

9.绘制地球

10.保存当前状态到盏中（）

注意这里第二次存档

11.设置围绕旋转（注意这里是围绕第二次移动后的原点旋转），旋转的角度是根据当前时间运算后得来的

12.第三次移动原点

13.绘制月亮的图像

14从盏中哪两次状态（回到第一次的状态。相当于读取档案因为读取两次档案所以是在第一次保存的状态）

注意此时的原点在在0，0点设置覆盖原则在后面绘制图像设置了线的颜色和填充的颜色

15.重新绘制路径（相当于吧笔拿起来（因为需要绘制的是一个圆就是地球的轨道所以需要重新绘制路径））

16.绘制地球的轨道

17.绘制月亮的图像

19.回调自身（此时本函数结束）

20.最后调用执行函数

动画会更新的原因是因为每次再次执行的时候旋转的度数是根据当前的时间决定的，而时间一直在变化这就导致每次更新旋转的度数都不一样这样动画就动起来了

我绘制了一个图可以根据图像来加以理解

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body >
    <canvas id="canvas" width="1000" height="1000"></canvas>
    <script>
//创建三个图片对象
        var sun = new Image();
        var moon = new Image();
        var earth = new Image();
        function init() {
            sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
            moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
            earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
            //告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。
            window.requestAnimationFrame(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);

            // 地球
            //创建一个时间对象
            var time = new Date();
            //设置旋转                          //根据当前时间返回秒数                            //根据当前时间返回响应秒数              
            ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
            //移动原点
            ctx.translate(105, 0);
            //绘制填充矩形
            ctx.fillRect(0, -12, 40, 24); // 影子
            //绘制图像
            ctx.drawImage(earth, -12, -12);

            // 月亮
            // 保存当前状态
            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();
            //从盏中拿出来状态
            ctx.restore();
            //重新绘制路径
            ctx.beginPath();
            //绘制一个圆形
            ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // 地球轨道
            //绘制路径
            ctx.stroke();
            //绘制图像
            ctx.drawImage(sun, 0, 0, 300, 300);
            //执行动画
            window.requestAnimationFrame(draw);
        }
        //调用函数
        init();
    </script>
</body>

</html>

案例效果
]

努力的豌豆芽

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
canvas--动画日，月，地实时运转案例

模拟日月地运转案例本案例将运用canvas动画技术来实现模拟日，月，地星球公转的案例首先声明三个图片对象案例思路init（）函数中：这个函数是启动函数他用来启动和设置一些变量1.给三个图片对象赋值2.调用动画函数让其执行draw（）函数中的内容draw()函数中：此函数主要进行画布的绘制1.定义覆盖原则目的是为了让月球运行到地球阴影部分时可以在阴影后面绘制2.设置填充颜色为的是一会儿绘制地球的阴影部分，设置轮廓颜色为的是一会儿绘制地球的轨道3.将当前状态保存到盏中（想象你玩游戏时候的
复制链接

扫一扫