canvas 圆点组成的汉字闪烁，
var can1=document.querySelector('#canvas1');
var ctx1=can1.getContext('2d');
var w=can1.width;
var h=can1.height;
var texts=["明星", "深爱", "小云", "直到", "永远"];
var font="bold 40px arial"
//texts=['I','LOVE','XIAO','YUN'];
//font="40px arial"
var index=0;
var num=1500;
var z=Math.sqrt(w*h/1500)
var points=[];
var length=1500;
var can2=document.createElement('canvas');
can2.width=w;
can2.height=h;
var ctx2=can2.getContext('2d');
//生成圆点
function setpoints(){
for(var i=0;i<num;i++){
points.push(new setcil(i));
}
}
function setcil(i){
this.r = Math.round(Math.random() * 255 | 0);
this.g = Math.round(Math.random() * 255 | 0);
this.b = Math.round(Math.random() * 255 | 0);
this.a =Math.random()*1;
this.a=this.a.toFixed(2);
this.x=(i*z)%w;
this.y=(i*z)/w*z;
this.offset=Math.random()*600;
this.radius=Math.random()*8+0.1;
this.state=true;
/*ctx1.beginPath();
ctx1.fillStyle='#000';
ctx1.arc(this.x,this.y,this.radius,0,Math.PI*2);
ctx1.fill();*/
}
//获取文字点的xy
var textdata=[];
function settextdata(){
var tx=texts[index];
if(index<texts.length-1){
index+=1;
}else{
index=0;
}
//设置背景写字
ctx2.fillStyle="#000";
ctx2.fillRect(0,0,w,h);
ctx2.fillStyle="#f00";
ctx2.font=font;
//ctx1.textAlign="center"//文字水平居中对齐
ctx2.fillText(tx,20,60);
//获取rgba数组值 得到红字的点x y
var imgdata=ctx2.getImageData(0,0,w,h).data;
textdata=[];
for(var i=0;i<imgdata.length;i+=4){
if(imgdata[i] !=0 ) {
var a={
x:i/4%w*8,
y:i/4/w*8
}
textdata.push(a);
/*ctx2.beginPath();
ctx2.fillStyle='#fff';
ctx2.arc(a.x,a.y,1,0,Math.PI*2);
ctx2.fill();*/
}
}
console.log(textdata.length)
if(textdata.length<1500){
length=textdata.length;
}else{
length=1500;
}
getdx();
}
//计算圆点最终显示的dx dy
function getdx(){
for(var i=0;i<points.length;i++){
var pa=points[i];
var txts=[];
var ind=0;
if(textdata.length){
for(var n=0;n<textdata.length;n++){
var po=textdata[n];
txts[n]=Math.sqrt( (pa.x-po.x)*(pa.x-po.x) + (pa.y-po.y)*(pa.y-po.y) );
if(n>0){
if(txts[n]<=txts[ind]){
ind=n;
}
}
}
points[i].dx=textdata[ind].x;
points[i].dy=textdata[ind].y;
textdata.splice(ind,1)
}
}
}
function draw(){
var now=Date.now();
ctx1.globalCompositeOperation = "source-over";
//设置填充为黑色并绘制全屏矩形
ctx1.fillStyle = '#000';
ctx1.fillRect(0, 0, w, w)
//设置重叠样式，重复区域颜色相加
ctx1.globalCompositeOperation = "lighter";
for(var i=0;i<length;i++){
var p=points[i];
if(p.x==0){
continue;
}
ctx1.beginPath();
//ctx1.fillStyle="#fff";
p.a=1;
ctx1.fillStyle='rgba('+p.r+','+p.g+','+p.b+','+p.a+')';
var mod=(p.offset+now)%600/600;
mod=Math.sin(mod*Math.PI);
ctx1.arc(p.x,p.y,p.radius*mod,0,Math.PI*2);
ctx1.fill();
p.x+=(p.dx-p.x)/10;
p.y+=(p.dy-p.y)/10;
}
}
window.onload=function(){
setpoints();
settextdata();
//draw();
setInterval(draw,30)
setInterval(settextdata,4000)
}
以上是原码
一、获取文字每个像素的xy:
在canvas上写字，字颜色不要和背景一样。
通过getImageData来获取画板每个点的rgba组成的数组
我们来分析这些数组颜色
I是加4的
可以判断 r g b 也就是i i+1 i+2 它们的颜色。
当条件满足时获取这时x y 并乘以数来放大点。
二、生成圆对象数组
圆 的个数需要固定，循环生成对象并存在数组里。
我们最先把这些圆 点平分在画板上。
需要算出每个点的xy的间隔
canvas的面积/点数 得到某面积内的一个点，开根就是长宽值内的点
圆 对象需要有rgb a 三个255内一个1内的随机数。
还需要8内的半径，和offset 值600内随机数
三、计算圆对象离哪个点最近。得到所有圆显示结果的xy
for 循环圆数组
得到当前圆对象，创建数组，循环所有点，判断这些点哪个和圆最近。
设置dy dx 也就是圆最后显示x y
然后删除这个点。这样一直循环下去。
判断两点的最短距离就是直线。
我们在两点间画直线，两点延长线上会有一个点交接。
三点组成垂直三角形。
最短距离是斜边。
a*a+b*b=c*c
根据这个来得到c的值。
四、每隔30ms渲染一次画板,计算每个点的新x y 和半径
循环圆数组
beginPath()开始画圆
设置fillStyle 也就是rgba
创建mod 它是圆半径
用offset+当前时间 % 600 /600 得到的值 是0-1 0-1
半径不能是小大 再从小到大这样不是闪烁的效果。
需要是0-1 1-0这样的。
这里用到了math.sin(0-3) 结果就是小大大小这样的值。
画圆。
p.x+=(p.dx-p.x)/10;
p.y+=(p.dy-p.y)/10;
算下一次新的xy。