怎么在Html5中使用canvas实现一个粒子时钟
这篇文章将为大家详细讲解有关怎么在Html5中使用canvas实现一个粒子时钟,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
首先要创建一个html文件并添加一个canvas画布,如下:
Document
下面导入素材,digit.js,素材中通过二维数组拼成一个个数字,共有:0-9和冒号,十个字符,如下:
可以看到为1的字符组成了
下面开始创建画布:
functionClock(){ varcanvas=document.getElementById("canvas"); canvas.width=600; canvas.height=100; this.cxt=canvas.getContext('2d'); this.cxt.fillStyle="#ddd"; this.cxt.fillRect(0,0,500,100); }
上面的代码就可以在浏览器画一个小灰色画布了
下面我们开始分析:
1.了解数据矩阵?就是多维数组
2.如何画圆?
2.1要先知道半径?
由上图得知,圆心的位置依次为:
r+1 r+1+(r+1)*2*1 r+1+(r+1)*2*2 。。。 r+1+(r+1)*2*i
同时,也可以通过计算圆的高度,得到半径,如下:
一个圆的高度是(r+1)*2,画布高度是由10个圆组成
canvasHeight=(r+1)*2*10
若将画布高度设为100,则r就出来了,圆心xy也出来了,开始画圆了先要在上面的Clock对象中加一条语句,计算r
this.r=100/20-1;
下面我在Clock的原型上加上draw方法
Clock.prototype.draw=function(num,index){ this.cxt.fillStyle="#000"; for(leti=0;idraw接收2个参数,第一个是字符索引,第二个是字符偏移顺序,70就是一个偏移距离,可以自定。第一个for,拿到要渲染的字符数组,第二个for,取每一行进行渲染且只渲染为1的,画圆的参数主要是x,y,r
下面就要得到时间,我们可以直接从new Date中用正则取时间,如下:
Clock.prototype.getTime=function(){ varreg=/(\d)(\d):(\d)(\d):(\d)(\d)/.exec(newDate()); vardata=[]; data.push(reg[1],reg[2],10,reg[3],reg[4],10,reg[5],reg[6]); for(vari=0;i通过正则可以方便的取到时分秒,在push数组时注意格式对应,其中10表示digit.js中的第10位字符,即冒号注意 这样画会有问题,即画布不能刷新,可以加上这个
canvas.height=100下面可以运行代码了,如下:
varclock=newClock(); setInterval(()=>{ clock.getTime(); })关于怎么在Html5中使用canvas实现一个粒子时钟就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
推荐阅读
-
html5中video不支持的格式是什么
html5中video不支持的格式是什么这篇“html5中vide...
-
html5会不会被淘汰
html5会不会被淘汰这篇文章主要介绍“html5会不会被淘汰”的...
-
IE开始支持HTML5的版本是什么
IE开始支持HTML5的版本是什么本篇内容主要讲解“IE开始支持H...
-
youtube html5播放失败如何解决
youtubehtml5播放失败如何解决本篇内容主要讲解“you...
-
html5 input禁止输入如何实现
html5input禁止输入如何实现这篇“html5input...
-
html5中的base怎么使用
html5中的base怎么使用这篇文章主要介绍“html5中的ba...
-
html5 date样式如何修改
html5date样式如何修改这篇“html5date样式如何...
-
html5的含义是什么
html5的含义是什么这篇文章主要介绍“html5的含义是什么”的...
-
HTML5如何实现禁止android视频另存为
HTML5如何实现禁止android视频另存为今天小编给大家分享一...
-
html5如何实现隐藏剩余显示内容
html5如何实现隐藏剩余显示内容这篇“html5如何实现隐藏剩余...