var threshold = 1000; var tweenTime = 800; var fps = 60; var tweens = [], dots = []; var TIME = 1000/fps; var fontsize = 150; var Size = fontsize*fontsize; var SEC = 0, MIN = 1, HOUR = 2, CRN = 3; var canvas = document.getElementById('canvas'); var text = document.getElementById('Text'); var times = []; var ex,ey; function TimeText(T, x, y){ this.x = x; this.y = y; this.T = T; var c = document.createElement('canvas'); this.c = c; c.width = fontsize; c.height = fontsize; var ctx = c.getContext('2d'); ctx.font = (fontsize*0.8|0) + "px serif"; ctx.fillStyle = 'red'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; //document.body.appendChild(c); this.ctx = ctx; } TimeText.prototype.setText = function setText(text, now) { var ctx = this.ctx; var X = this.x, Y = this.y; ctx.clearRect(0,0,fontsize,fontsize); ctx.fillText(text, fontsize/2, fontsize/2); var data = ctx.getImageData(0, 0, fontsize, fontsize-2).data; var n = dots.length; var t = this.T; while(n){ n--; if(dots[n][2] === t){ setPixel(dots[n][0], dots[n][1], 0, 0, 0, 245); dots.splice(n, 1); } } for(var y = 0, yl = fontsize; y < yl; y++){ for(var x = 0, xl = fontsize; x < xl; x++){ var id = x + y * fontsize, idx = id*4; if (data[idx]===255) { var _x, _y, r = Math.random(); _x = t ? width /2 : x*1.66+X-fontsize/3; _y = t ? 0 : y*1.66+Y-fontsize/3; var d = [ _x, _y, t, true ]; var _i = dots.push(d); moveDot(now, _i, d, [x+X, y+Y], t?Math.random()*2-0.5:Math.random(), Math.random()); } } } }; var width = canvas.width; var height = canvas.height; canvas.style.left = (document.documentElement.clientWidth -width )/2+'px'; canvas.style.top = (document.documentElement.clientHeight-height)/2+'px'; var bitmap = canvas.getContext('2d'); var pixels = bitmap.getImageData(0, 0, width, height); var data = pixels.data; function setPixel(x, y, r, g, b, a){ if (x >= 0 && x < width && y >= 0 && y < height) { var idx = ((x|0) + (y|0) * width)*4; data[idx+0] = r; data[idx+1] = g; data[idx+2] = b; data[idx+3] = a; } } function faidout(){ for (var i = 3, l = data.length;i < l;i+=4){ var a = data[i]; if (a === 0){ } else if(a < 246) { if (a < 36) { data[i] = 0; } else if (a < 66) { data[i] *= 0.96; } else { data[i] *= 0.95; } } else { data[i]--; } } } var sec = -1 , Sec = new TimeText(SEC, (width - fontsize)/2, (height - fontsize)*3/4), min = -1 , Min = new TimeText(MIN, width/2 , (height - fontsize)*1/5), crn = -1 , Crn = new TimeText(CRN, width/2 - fontsize*0.55, (height - fontsize)*1/6), hour = -1, Hour = new TimeText(HOUR, width/2 - fontsize*11/10, (height - fontsize)*1/5); Crn.setText(':', +new Date); setInterval(function(){ var now = new Date, _now = +now, now_h = now.getHours(); now_m = now.getMinutes(); now_s = now.getSeconds(); if (now_s !== sec) { sec = now_s; Sec.setText(('0'+sec).slice(-2), _now); } if (now_m !== min) { min = now_m; Min.setText(('0'+min).slice(-2), _now); } if (now_h !== hour) { hour = now_h; Hour.setText(('0'+hour).slice(-2), _now); } motionTween(_now); var n = dots.length; while(n) { n--; var d = dots[n]; var t = d[2]; setPixel(d[3] ? d[0] : d[0]+Math.random()*5,d[3] ? d[1] : d[1]+Math.random()*5, 0, 0, 0, 245); } bitmap.putImageData(pixels, 0, 0); faidout(); },TIME); function motionTween(now) { var A, a, ta, t, ex, ey, tweenTime, seedx, seedy; var n = tweens.length; while (n) { n--; A = tweens[n]; if(A) { a = A.a; seedx = A.seedx; seedy = A.seedy; tweenTime = A.tweenTime; ta = A.tween; t = now - ta[0]; if (t < tweenTime) { a[0] = bezier2(Math.min(t/tweenTime, 1), ta[1][0], width *seedx, ta[2][0]); a[1] = bezier2(Math.min(t/tweenTime, 1), ta[1][1], height*seedy, ta[2][1]); } else { a[0] = ta[2][0]; a[1] = ta[2][1]; a[3] = false; tweens.splice(n,1); } } } } function bezier2(t, p0, p1, p2) { return (1-t) * (1-t) * p0 + 2 * t * (1-t) * p1 + t * t * p2; } function moveDot(now, i, dot, pos, sx, sy) { var time = !dot[2] ? 0 : (dot[2] === 1) ? 60*1000*Math.random()*Math.random()*Math.random() : (dot[2] === 2) ? 60*1000*Math.random()*Math.random() : -500; tweens.push({ a:dot, tweenTime:(tweenTime + time)*Math.random(), tween:[now, dot.slice(), pos], seedx:sx, seedy:sy }); } document.body.onmousedown = function(e){ var n = dots.length; var t = this.T; var s = +new Date; while(n){ n--; var d = dots[n]; if(!d[3]){ var x = d[0], y = d[1]; d[0] = Math.random()*width; d[1] = Math.random()*height; d[3] = true; moveDot(s, n, d, [x,y], Math.random(), Math.random()); } } return false; };
<canvas id="canvas" width="400" height="400"></canvas>
canvas{ background:#fff; position:absolute; }