canvas之背景特效
程序员文章站
2022-09-26 19:40:02
需具备js基础知识以及canvas相关方法(可查阅相关文档) 下面是一篇有关js与canvas的背景特效 基于面向过程的思维 ......
需具备js基础知识以及canvas相关方法(可查阅相关文档)
下面是一篇有关js与canvas的背景特效
基于面向过程的思维
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #canvas { display: block; background: #000; } </style> </head> <body> <canvas id="canvas"></canvas> <script> window.requestAnimationFrame =(function(){//解决定时器卡问题,使用帧动画 return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback){ window.setInterval (callback,1000/60); }; })(); //初始化变量 var canv=document.getElementsByName("canvas"); var cxt=canvas.getContext("2d"); var w,h; var num=200; var data=[]; var move={}; window.onresize=init;//在浏览器窗口变化时重置 init(); //获取浏览器宽高并使粒子随机分布 function init(){ canvas.width = window.innerWidth ; canvas.height = window.innerHeight ; w = canvas.width; h = canvas.height; for(var i=0;i<num;i++){ data[i]={x:Math.random()*w,y:Math.random()*h,cX:Math.random()*0.6-0.3,cY:Math.random()*0.6-0.3}; Cricle(data[i].x,data[i].y); } } //绘制粒子 function Cricle(x,y){ cxt.save(); cxt.fillStyle ="pink"; cxt.beginPath (); cxt.arc (x,y,0.5,Math.PI*2,false); cxt.closePath (); cxt.fill (); cxt.restore (); } //自执行使粒子运动 !function draw(){ cxt.clearRect(0,0,w,h);//清除,防止粒子运动成线 for(var i=0;i<num;i++){ data[i].x+=data[i].cX;//粒子运动 data[i].y+=data[i].cY; if(data[i].x>w||data[i].x<0) data[i].cX=-data[i].cX;//设置边界值判断防止粒子跑出边界 if(data[i].y>h||data[i].y<0) data[i].cY=-data[i].cY; Cricle(data[i].x,data[i].y); for(var j=i+1;j<num;j++){ //使粒子连线 if((data[i].x-data[j].x)*(data[i].x-data[j].x)+(data[i].y-data[j].y)*(data[i].y-data[j].y)<=50*50){ line(data[i].x,data[i].y,data[j].x,data[j].y,false); } //使粒子与鼠标连线 if(move.x){ if((data[i].x-move.x)*(data[i].x-move.x)+(data[i].y-move.y)*(data[i].y-move.y)<=100*100){ line(data[i].x,data[i].y,move.x,move.y,true); } } } } window.requestAnimationFrame(draw);//定时器 // setInterval(function(){ // draw(); // },130); }(); //使粒子的连线颜色渐变 function line(x1,y1,x2,y2,isMove){ var color=cxt.createLinearGradient(x1,y1,x2,y2); if(!isMove){ color.addColorStop(0,"yellow"); color.addColorStop(1,"pink"); }else{ color.addColorStop(0,"#fff"); color.addColorStop(1,"#0bd2dd"); } cxt.save(); cxt.strokeStyle=color; cxt.beginPath(); cxt.moveTo(x1,y1); cxt.lineTo(x2,y2); cxt.stroke(); cxt.restore(); } //鼠标移入与粒子连线 document.onmousemove=function(e){ move.x= e.clientX; move.y= e.clientY; } </script> </body> </html>
上一篇: 精选臭事爆笑四则