介绍 & lt; div id=皌est"比;
,& lt; button> 1 & lt;/button>
,& lt; button> 2 & lt;/button>
,& lt; button> 3 & lt;/button>
,& lt; button> 4 & lt;/button>
,& lt; button> 5 & lt;/button>
,& lt; button> 6 & lt;/button>
,& lt; button> 7 & lt;/button>
,& lt; button> 8 & lt;/button>
,& lt; button> 9 & lt;/button>
,& lt; button> 10 & lt;/button>
& lt;/div>
& lt; canvas id=癱anvas"祝辞当前浏览器不支持画布,请更换浏览器后再试& lt;/canvas>
https://www.yisu.com/zixun/& lt; script src=" http://files.cnblogs.com/files/xiaohuochai/digit.js ">
<脚本>画布var=. getelementbyid(“画布”);
如果(canvas.getContext) {
var cxt=canvas.getContext (2 d);
}
函数renderDigit (num) {//重置画布宽度,达到清空画布的效果
画布。身高=100;
var R=canvas.height/为20:1;
(var=0;我<数字(num) . length;我+ +){
(var j=0;j <数字(num)[我]. length;j + +) {
如果(数字(num][我][j]==1) {
cxt.beginPath ();
cxt.arc (j * 2 * (R + 1) + (R + 1) * 2 * (R + 1) + (R + 1), R, 0, 2 * Math.PI);
cxt.closePath ();
cxt.fill ();
}
}
}
}
var测试=. getelementbyid(测试);
测试。onclick=function (e) {
e=e | |事件;
var目标=e。目标| | e.srcElement;
如果(! isNaN (target.innerHTML)) {
renderDigit (target.innerHTML);
}
}
脚本 & lt; canvas id=癱anvas",在当前浏览器不支持画布,请更换浏览器后再试& lt;/canvas>
https://www.yisu.com/zixun/& lt; script src=" http://files.cnblogs.com/files/xiaohuochai/digit.js ">
<>脚本
画布var=. getelementbyid(“画布”);
如果(canvas.getContext) {
var cxt=canvas.getContext (2 d);
}
画布。身高=100;
画布。宽度=700;
函数renderDigit(指数,num) {
var R=canvas.height/为20:1;
(var=0;我<数字(num) . length;我+ +){
(var j=0;j <数字(num)[我]. length;j + +) {
如果(数字(num][我][j]==1) {
cxt.beginPath ();
cxt.arc (14 * (R + 2) *指数+ j * 2 * (R + 1) + (R + 1) * 2 * (R + 1) + (R + 1), R, 0, 2 * Math.PI);
cxt.closePath ();
cxt.fill ();
}
}
}
}
函数digitTime () {/*获取时间数据*/var temp=/(/d) (/d): (/d) (/d): (/d)/(/d)。exec()(新日期);//存储时间数字,由十位小时,个位小时,冒号,十位分钟,个位分钟,冒号,十位秒钟,个位秒钟这7个数字组成
var数据=[];
data.push(临时[1],临时[2],10日,临时[3],临时[4],10日,临时[5],临时[6]);/*渲染时钟*///重置画布宽度,达到清空画布的效果
画布。身高=100;
(var=0;我
这篇文章将为大家详细讲解有关帆布如何实现粒子时钟效果,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
效果展示
<强>点阵数字
digit.js是一个三维数组,包含的是0到9以及冒号(数字[10])的二维点阵。每个数字的点阵表示是7 * 10大小的二维数组
通过遍历数字点阵的二维数组,当该位置的值为1时,则绘制一个粒子,否则不绘制
将绘制数字的函数命名为renderDigit()。在该函数中,将粒子绘制为一个小圆,小圆的半径为R,小圆所占据的矩形宽(高)为2 (R + 1)。由于数字点阵是10 * 7的二维数组,所以一个数字的宽度为14 (R + 1),高度为20 (R + 1)
假设数字的高度为100 px,则小圆的半径4 R=
<强>时钟实现
在上一步的点阵数字的基础上,实现一个粒子时钟。将时钟实现的函数命名为digitTime()时钟实现由获取时间数据和渲染时钟两部分组成
<强>【时间数据】
最简单的时钟形式由两位的小时,两位的分钟和两位的秒钟组成,中间用冒号隔开。通过日期对象日期来获取当前时间,以及当前的小时,分钟和秒钟。但是,最终需要得到的是数字表示的时钟
比如12:02:36的时间数据的表示形式为数据[1、2 10 0 2,3,6)
<强>【渲染时钟】
,获取到时间数据后,通过循环使用renderDigit()来渲染时钟中的每一个数字。此时,有一个需要改变的地方是弧()函数中的x坐标,否则它们将叠加在一起
,为了将时钟数字表示更加清晰在每个数字之间增加一定的间距。每个数字的宽度是14 (R + 1),假设数数据组中7个数字的索引为索引,则每个数字的起始x坐标可以等于14日(R + 2) *指数
,最后通过定时器每间隔一段时间后更新时间
