Canvas炫酷的倒计时时钟

2018年1月29日22:01:42 发表评论 54

今天学习到了一个有趣的canvas教程,点击直达,其实这个教程早在上一年我就学习了,不过没看多少,就是因为不懂,今天学习了一遍,所有的代码都可以看的懂,应该说是有js基础的都能懂,只不过有小些的变量函数不知为何这么设置,所以在些重温习一遍代码,如果你想学习这个教程,请确保你有js基础,否则你可能看不懂,你也可以看下canvas的入门教程

Canvas炫酷的倒计时时钟

Canvas炫酷的倒计时时钟

一、Canvas基础准备

无论我们制作canvas游戏,动画都需要做这样的准备,首先在HTML中加入canvas元素,然后在JS中取得canvas元素,获得2d上下文对象,设置canvas的宽高属性。

  1. // html
  2. <canvas id="canvas">你的浏览器不支持canvas,请更换</canvas>
  3. // js
  4. var canvas = document.getElementById('canvas');
  5. var context = canvas.getContext('2d');
  6. canvas.width = 800;
  7. canvas.height = 500;

二、理解二维数组点阵

上面的倒计时数字都是由一个个小球绘制而成的,而这样的小球是由一个二维数组构成的,所以说有必要去理解下构成圆形数字的二维数组,下载项目github源码(digit.js构成球形数字的文件),下面这张图片中的5是这个文件中的一个数组。

Canvas炫酷的倒计时时钟

我们首先需要制作一个绘制静态数字的函数,根据digie.js数组文件,循环判断当前的数字是否为1,如果是则执行绘制小球路径,最后再填充。在canvas中,绘制一个球是用arc函数画一个画的路径,arc中需要提供圆心的坐标,和半径,角度,而这里最重要的是计算出循环的每个球圆心的半径,下图更为全面的解释了球圆心的半径公式,因为我们是一个数字一个数字绘制,为了确保每个数字都重叠在一起,我们需要给每个数字增加间隔。

Canvas炫酷的倒计时时钟

三、时间计算

我们已经绘制了固定的数字小球,然而这并不是我们想要的,我们是需要会变化的动态的数字小球,这就要进行一些时间计算,计算当前时间距离我们设定的倒计时的秒数,这要用到js Date相关的API。

四、倒计时动画

我们得到了当前时间距离我们要倒计时的秒数,就可以在定时器中对比每间隔一段时间的时间变化情况,只要时间一变化,就改变需要绘制的时分秒。这是要记住一个点,canvas动画就是一个不断的清除然后重绘的过程。

五、掉小球动画

首先我们需要在时间改变的同时绘制与改变数字相同的小球,循环小球的类得到随机的小球,然后再用canvas绘制小球。

六、代码优化

上面我们已经完成了一个Canvas炫酷的倒计时时钟的效果了,但是有几个小缺陷,而且是致命性的,我们上面创建的掉落的小球一直是增加的,顾名思义,如果运行久了,非常吃电脑内存,我们是否可以设定这样一样机制:当掉落的小球消失在画布上,就删除消失在画布小球的数组。

屏幕自适应就是改变canvas画布的大小,我们可以获取当前body的视窗大小赋值给canvas的 大小,小球的半径和数字间隔也是根据当前canvas的width来自适应的。

倒计时时间优化,我们这个Canvas炫酷的倒计时时钟如果设定的倒计时小于当前的时间程序就不会运行,我们可不可以在每次运行程序的时候在当前时间上加上一个小时,这样程序就永远不会没有动画效果了。

 

猿梦

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: