上传
点击文件名下载附件
css样式：
[CSS] 纯文本查看 复制代码
body,html {
margin:0;
width:100%;
overflow:hidden;
}
canvas {
width:100%;
}
.cont {
position:absolute;
}
.cont input {
border:0;
margin:0;
padding:15px;
outline:none;
text-align:center;
}
.cont button {
border:0;
margin:0;
padding:15px;
outline:none;
background:#333;
color:#fff;
cursor: pointer;
}
.cont button:focus,.cont button:hover {
background:#222
}HTML：
[HTML] 纯文本查看 复制代码
<div class="cont">
<input type="text" value="苏飞论坛" id="tit">
<button>
change
</button>
</div>
js代码：
[JavaScript] 纯文本查看 复制代码
var can = document.createElement("canvas");
document.body.appendChild(can);
var ctx = can.getContext('2d');
function resize(){
can.width = window.innerWidth;
can.height = window.innerHeight;
}
const max_radius = 3;
const min_radius = 1;
const drag = 50;
window.onresize = function(){
resize();
};
function cfill(){
ctx.fillStyle = "#000";
ctx.fillRect(0,0,can.width,can.height);
ctx.fill();
}
var mouse = {
x:-1000,
y:-1000
};
can.onmousemove = function(e){
mouse.x = e.clientX;
mouse.y = e.clientY;
};
can.ontouchmove = function(e){
mouse.x = e.touches[0].clientX;
mouse.y = e.touches[0].clientY;
};
resize();
cfill();
function distance(x,y,x1,y1){
return Math.sqrt( ( x1-x ) * ( x1-x ) + ( y1-y ) * ( y1-y ) );
}
class Particle{
constructor(pos,target,vel,color,radius){
this.pos = pos;
this.target = target;
this.vel = vel;
this.color = color;
this.radius = radius;
var arr = [-1,1];
this.direction = arr[~~(Math.random()*2)]*Math.random()/10;
}
set(type,value){
this[type] = value;
}
update(){
this.radius += this.direction;
this.vel.x = (this.pos.x - this.target.x)/drag;
this.vel.y = (this.pos.y - this.target.y)/drag;
if(distance(this.pos.x,this.pos.y,mouse.x,mouse.y) < 50){
this.vel.x += this.vel.x - (this.pos.x - mouse.x)/15;
this.vel.y += this.vel.y - (this.pos.y - mouse.y)/15;
}
if(this.radius >= max_radius){
this.direction *= -1;
}
if(this.radius <= 1){
this.direction *= -1;
}
this.pos.x -= this.vel.x;
this.pos.y -= this.vel.y;
}
draw(){
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.pos.x,this.pos.y,this.radius,0,Math.PI*2);
ctx.fill();
}
}
var particles = [];
var colors = ["#bf1337","#f3f1f3","#084c8d","#f2d108","#efd282"];
var bool = true;
var current = 0,i;
function changeText(text){
var current = 0,temp,radius,color;
cfill();
ctx.fillStyle = "#fff";
ctx.font = "120px Times";
ctx.fillText(text,can.width*0.5-ctx.measureText(text).width*0.5,can.height*0.5+60);
var data = ctx.getImageData(0,0,can.width,can.height).data;
cfill();
for(i = 0;i < data.length;i += 8){
temp = {x
i/4)%can.width,y:~~((i/4)/can.width)};
if(data !== 0 && ~~(Math.random()*5) == 1/*(temp.x % (max_radius+1) === 0 && temp.y % (max_radius+1) === 0)*/){
if(data[i+4] !== 255 || data[i-4] !== 255 || data[i+can.width*4] !== 255 || data[i-can.width*4] !== 255){
if(current < particles.length){
particles[current].set("target",temp);
}else{
radius = max_radius-Math.random()*min_radius;
temp = {x:Math.random()*can.width,y:Math.random()*can.height};
if(bool){
temp = {xi/4)%can.width,y:~~((i/4)/can.width)};
}
color = colors[~~(Math.random()*colors.length)];
var p = new Particle(
temp,
{xi/4)%can.width,y:~~((i/4)/can.width)},{x:0,y:0},
color,
radius);
particles.push(p);
}
++current;
}
}
}
bool = false;
particles.splice(current,particles.length-current);
}
function draw(){
cfill();
for(i = 0;i < particles.length;++i){
particles.update();
particles.draw();
}
}
changeText("苏飞论坛");
setInterval(draw,1);changeText("苏飞论坛");为初始化调用函数。
以上就是全部的代码了，如需源码，请点击》》
上传
点击文件名下载附件
作者: 范范 时间: 2021-7-16 16:28
支持下
| 欢迎光临 苏飞论坛 (http://www.sufeinet.com/) | Powered by Discuz! X3.4 |