特效样式:
html代码:
<canvas id="canvas" width="" height=""></canvas>
JS代码:
window.onload = function () {
//气泡效果
var canvas=document.getElementById('canvas');
var context=canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight+400;
var balls=[];
var colors=['#ea2a29','#574e84','#f89322','#ffea0d','#87b11d','#008253','#3277b5','#4c549f','#764394','#ca0d86'];
var timer=null;
/*
* 一个圆
* 1·半径不同
* 2·颜色不同
* 3·速度不同
* 4·位置不同
* 角度转弧度
* 角度*π/180
*
*/
//在canvas上画圆
function draw(ball){
context.beginPath();//开始的半径
context.arc(ball.x,ball.y,ball.r,0,Math.PI*2);//X轴位置 Y轴位置 起始弧度 结尾弧度
context.fillStyle=ball.color;//给圆填充颜色
context.globalCompositeOperation='lighter';//合成 lighter代表高亮
context.fill();
};
// 取X和Y之间的随机数Math.round(Math.random()*(y-x)+x)
function random(min,max){
return Math.round(Math.random()*(max-min)+min);
};
var on=true;//用来让鼠标移动的时候 定时也可以跑
//鼠标移动事件
canvas.onmousemove=function(ev){
ev = ev || event
for(i=0;i<2;i++){//在移动的时候创建两个圆就可以了
var ball={
x:random(-5,5)+ev.clientX,//X轴在鼠标旁边的随机位置
y:random(-5,5)+ev.clientY+window.pageYOffset,//Y轴在鼠标旁边的随机位置+页面滚动条滚动的距离
r:random(10,45),//圆的半径的随机数
vx:Math.random()-0.5,//X轴的速度的随机数(速度只能用小数0-1之间取值)
vy:Math.random()-0.5,//Y轴的速度的随机数(速度只能用小数0-1之间取值)
color:colors[random(0,colors.length-1)]//颜色数组中的随机数(从第0个到最后一个的随机数)
};
balls.push(ball);//添加进去创建圆的每一个对象
if(balls.length>300){//判断如果圆超过300个
// 删除
balls.shift();
};
};
if(on){//判断 如果为真 那么就清除定时器
clearInterval(timer);
//然后再运行定时器
timer=setInterval(drallBall,30);
on=false;
};
function drallBall(){
// 清空画布 清空X, Y 画布所有的宽度,高度
context.clearRect(0,0,canvas.width,canvas.height);
for(i=0;i<balls.length;i++){//循环画圆,画的时候改变圆的位置以及半径,看起来圆才是动的
balls[i].x+=balls[i].vx*8;//通过速度改变X轴的位置 (数值可以改变)
balls[i].y+=balls[i].vy*8;//通过速度改变Y轴的位置 (数值可以改变)
balls[i].r=balls[i].r*0.94;//改变半径的位置(数值可以改变,让半径变小)
balls[i].index=i;//添加索引,为了在下面能够找到它,并删除掉
if(balls[i].r<1){//判断如果 圆的半径小于1的话
//找到对应的圆并删掉对应的圆,1个。
balls.splice(balls[i].index,1);
continue;//持续
};
draw(balls[i]);//调用函数并把每一个圆作为参数传进去;
if(!balls.length){
clearInterval(timer);
on=true;
};
};
};
};
}