文字的颗粒效果

来源：互联网发布：阿里云的cdn怎么样编辑：程序博客网时间：2024/06/02 01:37
<html><head><style type="text/css">.canvas{background:#666;}</style></head><body><canvas class="canvas"></canvas><script type="text/javascript">var S = {start:function(){Draw.init();var dots = this.createPoint(Draw._draw());Draw.loop(function(){for(var d = 0; d < dots.length;d++){dots[d].render();}});},createPoint: function(p){var dots = [],size = p.dots.length,s = 0,cx = 0,cy = 0;cx =window.innerWidth / 2 - p.w / 2 ;cy =window.innerHeight / 2 - p.h /2;for(var i = 0; i < size;i++){dots.push(new Dot(window.innerWidth / 2, window.innerHeight / 2));}while(size--){dots[s].d.push(new Point({x:p.dots[s].x + cx,y:p.dots[s].y + cy}));s++;}return dots;}};Point = function(args){this.x = args.x;this.y = args.y;this.z = args.z;};Dot = function(x,y){this.p = new Point({x:x,y:y,z:5});this.e = 0.05;this.d = [];};Dot.prototype = {removeTo: function(){var dx = this.p.x - this.d[0].x,dy = this.p.y - this.d[0].y,dl = Math.sqrt(dx * dx + dy * dy),e = this.e * dl;if(dl > 1){this.p.x -= dx / dl * e;this.p.y -= dy / dl * e;}else{this.p.x = this.p.x;this.p.y = this.p.y;}},fillD: function(d){this.d.push(d); },render: function(){this.removeTo();Draw.drawDot(this.p);}}<span style="font-family: monospace; white-space: pre; background-color: rgb(240, 240, 240);">Draw = (function(){var canvas = document.querySelector('.canvas'),context = canvas.getContext('2d');var loopfn,requestFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnumationFrame || window.oRequestAnimationFrame || window.mzRequestAnimationFrame || function (callback){ setTimeout(callback,1000 / 60); };function proceImg(){var pixels = context.getImageData(0,0,canvas.width,canvas.height).data,dots = [],x = 0, y = 0,w = 0,h = 0,fx = canvas.width,fy = canvas.height,gap = 13;for(var p = 0;p < pixels.length;p+=(4 * gap)){if(pixels[p+3] > 0){dots.push(new Point({x:x,y:y}));w = x > w ? x : w;h = y > h ? y : h;fx = x < fx ? x : fx;fy = y < fy ? y : fy;}x += gap;if(x > canvas.width){x = 0;y += gap;p += gap * 4 * canvas.width;}}return {dots:dots,w:w + fx,h:h + fy};}return {init: function(){canvas.width = window.innerWidth;canvas.height = window.innerHeight;},drawDot: function(p){context.fillStyle = "#fff";context.beginPath();context.arc(p.x,p.y,p.z,0,2 * Math.PI);context.closePath();context.fill();},loop: function(fn){loopfn = !loopfn ? fn : loopfn;this.clearFrame();loopfn();requestFrame.call(window,this.loop.bind(this));},_draw:function(){context.fillStyle = "#fff000";context.font = "300px Arial";//context.clearRect(0, 0, canvas.width, canvas.height);context.fillText("sun",canvas.width / 2,canvas.height / 2);return proceImg();},clearFrame:function(){context.clearRect(0,0,canvas.width,canvas.height);}}}());S.start();</script></body></html></span>
0 0