canvas- 基本动画

动画的基本步骤:

1.清空canvas

除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 clearRect 方法。

2.保存canvas状态

如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。

3.绘制动画图形

这一步才是重绘动画帧。

4.恢复canvas状态

如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。

操控动画 Controlling an animation

setInterval(function, delay)

当设定好间隔时间后，function会定期执行。

setTimeout(function, delay)

在设定好的时间之后执行函数

requestAnimationFrame(callback)

这个方法提供了更加平缓并更加有效率的方式来执行动画，当系统准备好了重绘条件的时候，才调用绘制动画帧。一般每秒钟回调函数执行60次，也有可能会被降低.
告诉浏览器你希望执行一个动画，并在重绘之前，请求浏览器执行一个特定的函数来更新动画。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
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('tutorial').getContext('2d');
            ctx.globalCompositeOperation = 'destination-over';
            ctx.clearRect(0, 0, 300, 300); //除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 clearRect 方法
            ctx.fillStyle = 'rgba(0,0,0,0.4)';
            ctx.strokeStyle = 'rgba(0,153,255,0.4)'; //画太阳外面的圆
            ctx.save(); //如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。
            ctx.translate(150, 150);
            // earth
            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, 50, 24);
            ctx.drawImage(earth, -12, -12)
            // // moon
            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(); // 如果已经保存了 canvas 的状态，可以先恢复它，然后重绘下一帧。

            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();
1
2
3
ctx.beginPath();
ctx.arc(150, 150, 105, 0, Math.PI * 2, false);
ctx.stroke();
1
ctx.drawImage(sun, 0, 0, 300, 300);
1
2
3
4
5
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, 50, 24);
ctx.drawImage(earth, -12, -12)
1
2
3
var time = new Date();
ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
ctx.fillRect(0, -12, 50, 24);
1
ctx.translate(105, 0);
1
ctx.drawImage(earth, -12, -12)
1
2
3
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);