需具備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>
