您的位置：首页 > 其它
文字的颗粒效果

2014-10-12 21:48 127 查看
<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航