canvas绘图详解-03-绚丽的倒计时效果

Posted 2020-08-30 crystalhuhu

制作一个上面这种倒计时效果，只截了三秒

此效果源码github连接：https://github.com/wufangfang0614/fanggit/tree/master/canvas/%E5%80%92%E8%AE%A1%E6%97%B6%E6%97%B6%E9%92%9F

首先分析这个得有一定的数学知识和物理知识（看这个课程的时候，心想要是一上来让我自己想明白这个过程我可弄不明白。）

以下是我自己记录的我不会的知识点：

1、 const endTime = new Date(2017,6,11,18,27,54);

 const用于定义一个常量，不可以修改并且必须初始化，js里面的月份是从0开始，这里的6是代表7月。

2、a = new Date(); a.getTime();

getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数。

3、Math.round()四舍五入

　  Math.ceil()向上取整

     Math.pow(a,b) a的b次方

     Math.random() 随机0-1

4、每次重新渲染时，要刷新画布

cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);//对矩形内图像进行刷新操作

5、全局变量在window.onload = function(){}外定义，最好使用大写字母

6、写程序的方式是先写大框架（前提你想好了程序的大致逻辑），先干什么后干什么，写到一个改功能的时候，觉得这个功能要放到一个函数里，去写这个函数，写完了再回来接着写大框架。

7、canvas制作动画的基础

最简单的一个方式就是setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval(
        function(){
            render(context);
            update();
        },
        50
    );

上面是每50ms执行以下function()函数，function()函数里有两个函数，一个是渲染函数，一个是更新数据函数。每次渲染函数都会根据数据函数来进行渲染。

8、定义一个公用掉落小球的数组（ps之前没用过这样的数字，就是记录一下）

var Ball = {
                    x:x+j*2*(RADIUS+1)+(RADIUS+1),
                    y:y+i*2*(RADIUS+1)+(RADIUS+1),
                    //半径为RADIUS
                    g:1.5+Math.random(),//1.5到2.5之间
                    vx:Math.pow(-1,Math.ceil(Math.random()*1000))*4,//+4或-4
                    vy:-5,
                    color:colors[Math.floor(Math.random()*colors.length)]
                }

9、整个demo的思路是

 

10、绘制小球计算方法

11、优化内存

小球离开屏幕的数据要删掉，有加就有减