html动态背景分享,酷炫一款动态背景（HTML +js canvas）

一款酷炫的前端动态页面

废话不多说 ，分享一款酷炫的页面动态背景 效果见下图。

查看  demo

背景图效果：

实例效果

点击效果：

背景css

*{

margin: 0;

padding: 0;

}

#canvas{

position: fixed;

background: #ccc;

overflow: auto;

z-index: -1;

}

背景html

背景js

window.requestAnimationFrame = (function(){

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

function( callback ){

window.setTimeout( callback, 1000/2 );

};

})();

var myCanvas = document.getElementById("canvas");

var ctx = myCanvas.getContext("2d");//getContext 设置画笔

var num;

var w,h;

var duixiang = [];

var move = {};

function widthheight(){

w = myCanvas.width = window.innerWidth;

h = myCanvas.height = window.innerHeight;

num= Math.floor(w*h*0.00028);//点的数量。根据屏幕大小确定

for(var i = 0;i < num;i++){

duixiang[i] = {

x:Math.random()*w,

y:Math.random()*h,

cX:Math.random()*0.6-0.3,

cY:Math.random()*0.6-0.3,

R:Math.floor(Math.random()*5)+2,

//CC:Math.floor(Math.random()*3)+2,

r: Math.floor(Math.random() * 254),

g: Math.floor(Math.random() * 254),

b:Math.floor(Math.random() * 254)

}

// console.log(duixiang[i])

Cricle(duixiang[i].x,duixiang[i].y,duixiang[i].R,duixiang[i].r,duixiang[i].g,duixiang[i].b);

//Cricle(duixiang[i].x,duixiang[i].y,duixiang[i].R,duixiang[i].CC);

}

};widthheight();//获取浏览器的等宽度等高

function Cricle(x,y,R,r,g,b){

ctx.save();//保存路径

if(Math.random()>0.991) {ctx.globalAlpha= 0.9;}//ctx.fillStyle = "#CCC";}//填充的背景颜色

else { ctx.globalAlpha=0.47;}

ctx.fillStyle = "rgb("+ r +","+ g +","+ b +")";

ctx.beginPath();//开始绘画

ctx.arc(x,y,R,Math.PI*2,0);//绘画圆 x y 半径(大小) 角度 一个PI 是180 * 2 = 360 真假 0/1 true/false

ctx.closePath();//结束绘画

ctx.fill();//填充背景颜色

ctx.restore();//回复路径

};Cricle();

!function draw(){

ctx.clearRect(0,0,w,h)//先清除画布上的点

for(var i = 0;i < num;i++){

duixiang[i].x += duixiang[i].cX;

duixiang[i].y += duixiang[i].cY;

if(duixiang[i].x>w || duixiang[i].x<0){

duixiang[i].cX = -duixiang[i].cX;

}

if(duixiang[i].y>h || duixiang[i].y<0){

duixiang[i].cY = -duixiang[i].cY;

}

Cricle(duixiang[i].x,duixiang[i].y,duixiang[i].R,duixiang[i].r,duixiang[i].g,duixiang[i].b);

//勾股定理判断两点是否连线

for(var j = i + 1;j < num;j++){

if( (duixiang[i].x-duixiang[j].x)*(duixiang[i].x-duixiang[j].x)+(duixiang[i].y-duixiang[j].y)*(duixiang[i].y-duixiang[j].y) <= 55*55 ){

line(duixiang[i].x,duixiang[i].y,duixiang[j].x,duixiang[j].y,0,i,j)

}

if(move.x){

if( (duixiang[i].x-move.x)*(duixiang[i].x-move.x)+