炫丽的倒计时效果Canvas绘图与动画基础_技术问答

首页免费课炫丽的倒计时效果Canvas绘图与动画基础问答

炫丽的倒计时效果Canvas绘图与动画基础

                
                liuyubobobo
            全栈工程师

                    查看讲师更多课程 
                    liuyubobobo讲师的其他课程
                
算法与数据结构（C++版） 面试/评级的算法复习技能包
实战·初级·11192

                                                                                                                                    ￥166.00
                                            
玩转算法面试-- Leetcode真题分门别类讲解
实战·初级·7418

                                                                                                                                    ￥266.00
                                            
 7个经典应用诠释Java算法精髓
实战·初级·1893

                                                                                                                                    ￥248.00
                                            
Python3入门机器学习&nbsp;经典算法与应用&nbsp;&nbsp;
实战·中级·5855

                                                                                                                                    ￥499.00
                                            
结合编程学数学 专为程序员设计的线性代数
实战·初级·3413

                                                                                                                                    ￥348.00
                                            
玩转算法系列--图论精讲（Java版）
实战·中级·1594

                                                                                                                                    ￥348.00
                                            
                难度中级
            
                时长 1小时30分
            
                学习人数
            
综合评分9.70
                            349人评价
                        查看评价
                                9.9
                                内容实用
                            
                                9.7
                                简洁易懂
                            
                                9.5
                                逻辑清晰

全部评论问答未解决精华

灰羽小魔

完结撒花！

1 5-8 综合介绍

2016-08-05

CallMeJoe__Rich

加速度这必然是高中物理啊

1 4-2 使用canvas做个物理实验

2016-08-05

CallMeJoe__Rich

老师你的说辞是算好时间了的吧！这么炫！

0 1-1 欢迎进入Canvas的世界！

2016-08-05

Benjamin_Smith

内像素，绘制倒计时（因为nextShowTimeSeconds每50ms比之前少了Xms时间，所以有了变化的效果）
上面我之所以说是Xms（你没看错，是X，X代表未知数），是因为，setInterval()是一个基础的框架，计时并不是非常准确
希望我这么磨磨唧唧的解释能给不理解的同学点启示

0 4-1 一个实现动画的基础函数

2016-08-03

Benjamin_Smith

给curShowTimeSeconds这个函数赋值，所以，才有了倒计时变化的效果，setInterval()这个函数是50ms计算一次，所以render()这个函数50ms绘制一次，render()里第一个cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);它的作用是清空给定范围内的像素，所以这里的流程是这个的：render()执行清空范围内像素，绘制倒计时时间，setInterval()50ms刷新，curShowTimeSeconds = nextShowTimeSeconds，render()再次清空范围

0 4-1 一个实现动画的基础函数

2016-08-03

Benjamin_Smith

像素的，render()这个函数绘制的像素
第三，render()作用是在页面上显示出来，它的作用是显示，不是计时，其他函数给它多少时间，就是多少时间，所以，curShowTimeSeconds这个值是固定的，如果其他函数赋给它是5，它就在屏幕显示5，如果不刷新页面，不重新给curShowTimeSeconds赋值，那么它一直就是5，我知道有人会说：前面的这个函数curShowTimeSeconds = getCurShowTimeSeconds();怎么解释？我们之前之所以每次刷新页面后倒计时才变化，是因为我们刷新了，我们重新

0 4-1 一个实现动画的基础函数

2016-08-03

Benjamin_Smith

第二，因为var nextShowTimeSeconds = getCurShowTimeSeconds()，又因为setInterval()这个框架是50ms刷新，也就是说，nextShowTimeSeconds是50ms刷新一次，这里只是刷新，系统里面的刷新，如果我们不刷新页面，我们就不知道，所以为了让我们看到，在render()函数里加了cxt.clearRect(0,0,WINDOW_WIDTH,WINDOW_HEIGHT);它的作用是清空给定矩形内的指定像素,也就是清空WINDOW_WIDTH和WINDOW_HEIGHT这个页面的

0 4-1 一个实现动画的基础函数

2016-08-03

Benjamin_Smith

这里关于nextShowTimeSeconds，curShowTimeSeconds，getCurShowTimeSeconds()的问题可以这样理解：
首先要知道，刷新页面的概念，刷新页面可以使函数重新计算，重新赋值
getCurShowTimeSeconds();这个函数我们每刷新一次页面，它就会重新获取一个值
var curTime = new Date();var ret = endTime.getTime() - curTime.getTime();
上面new Date是当前时间，当前时间每分每秒都在变化，getCurShowTimeSeconds();每刷新一次页面都有一个新值

0 4-1 一个实现动画的基础函数

2016-08-03

Benjamin_Smith

关于时间不显示问题：
老师说：
第一，这个倒计时不能的天不能超过四天，4*24，如果超过了是五天，5*24>99，不能正常显示
第二，月份，new Date(year, month, day, hours, minutes, seconds, milliseconds),month是从0开始算的，也就是说，如果这里是0，则代表是1月，以此类推

2 3-3 倒计时的时间计算

2016-08-03

我一定不是吃货

装逼如风，常伴吾身

1 4-2 使用canvas做个物理实验

2016-08-02

lewandowski

谢谢老师！！！

2 5-5 修改为炫丽的时钟效果

2016-08-01

lewandowski

真牛逼啊，原理是这样

0 4-2 使用canvas做个物理实验

2016-07-31

lewandowski

老师的update应该是为后面做铺垫的吧，所以才写这么繁琐

1 4-1 一个实现动画的基础函数

2016-07-31

任振小东

假设没闭合，用了fill()自动连接首尾闭合，

0 2-2 绘制直线、多边形和七巧板

2016-07-31

缘分星空

数学不行！我听不懂

0 3-2 倒计时数字钟的具体绘制

2016-07-30

风暴阿呆3552079

是不是非常的酷...

0 4-2 使用canvas做个物理实验

2016-07-30

首页上一页 64 65 66 67 68 69 70 下一页尾页

开始学习

课程须知: 1.要对HTML+CSS相关标签有所掌握；2.对网页布局知识有简单的了解；3.掌握一定的JS基础知识

老师告诉你能学到什么？: 通过学习Cancas倒计时效果的基础知识：比如球形的绘制，动画的基础原理，让Canvas帮助我们制作出绚丽的效果，力图每一个课程除了介绍知识，还能帮助大家使用Canvas制作出属于自己的动画和游戏作品。

微信扫码，参与3人拼团

热搜

最近搜索清空

炫丽的倒计时效果Canvas绘图与动画基础