canvas場景連線特效 例項
阿新 • • 發佈：2019-01-24
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>canvas場景連線特效</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#canvas{
display:block;
background:#000;
}
</style>
</head>
<body>
<canvas id="canvas">
</canvas>
<script type="text/javascript">
/*var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");//畫筆*/
var Canvas={
//初始化:是所有人都要遵循的
//this在當前Canvas的作用域下相當於一個全域性變數
init:function(){
var canvas=document.getElementById("canvas");
this.cxt=canvas.getContext("2d");//畫筆
//瀏覽器和網頁等高等寬
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
this.cw=canvas.width;
this.ch=canvas.height;
this.num=300;//建立小圓點的個數
this.data=[];//儲存小圓點的資料
for(var i=0;i<this.num;i++){
this.data[i]={
x:Math.random()*this.cw,
y:Math.random()*this.ch,
cX:Math.random()*0.6-0.3,
cY:Math.random()*0.6-0.3
}
this.drawCircle(this.data[i].x,this.data[i].y);
}
},
//繪製粉色小點
drawCircle:function(x,y){
cxt=this.cxt;
cxt.save();//儲存路徑
cxt.fillStyle='pink';//圓的填充顏色粉紅色
cxt.beginPath();//開始路徑
cxt.arc(x,y,1,0,Math.PI*2,false);//繪畫方法
cxt.closePath();//結束路徑
cxt.fill();//填充
cxt.restore();//釋放路徑
},
//小圓點運動
moveCricle:function(){
var self=this;
var cw=this.cw;
var ch=this.ch;
self.cxt.clearRect(0,0,cw,ch);//先讓整個畫布清空
//然後在繪畫下一個點
for(var i=0;i<self.num;i++){
self.data[i].x+=self.data[i].cX;
self.data[i].y+=self.data[i].cY;
//碰撞的邊界值檢測
if(self.data[i].x>cw||self.data[i].x<0){
self.data[i].cX=-self.data[i].cX;
}
if(self.data[i].y>ch||self.data[i].y<0){
self.data[i].cY=-self.data[i].cY;
}
self.drawCircle(self.data[i].x,self.data[i].y);
//用勾股定理判斷是否連線
for(var j=i+1;j<self.num;j++){//下一點的迴圈
if(Math.pow(self.data[i].x-self.data[j].x,2)+Math.pow(self.data[i].y-self.data[j].y,2)<=50*50){
self.drawLine(self.data[i].x,self.data[i].y,self.data[j].x,self.data[j].y,false);
}
}
if(move.x){
if(Math.pow(self.data[i].x-move.x,2)+Math.pow(self.data[i].y-move.y,2)<=50*50){
self.drawLine(self.data[i].x,self.data[i].y,move.x,move.y,true);
}
}
}
},
//繪製線條
drawLine:function(x1,y1,x2,y2,isMove){
var cxt=this.cxt;
var color=cxt.createLinearGradient(x1,y1,x2,y2);
if(!isMove){
color.addColorStop(0.5,"yellow");
color.addColorStop(1,"red");
}
else{
color.addColorStop(0.5,"#ccc");
color.addColorStop(1,"#06c");
}
cxt.strokeStyle=color;
cxt.beginPath();
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.closePath();
cxt.stroke();//填充方式，畫線
cxt.restore();
}
}
var move={};
document.addEventListener("mousemove",function(e){
move.x=e.clientX;
move.y=e.clientY;
},false)
Canvas.init();
//時間控制元件
setInterval(function(){
Canvas.moveCricle();
},0.5)
</script>
</body>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>canvas場景連線特效</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#canvas{
display:block;
background:#000;
}
</style>
</head>
<body>
<canvas id="canvas">
</canvas>
<script type="text/javascript">
/*var canvas=document.getElementById("canvas");
var cxt=canvas.getContext("2d");//畫筆*/
var Canvas={
//初始化:是所有人都要遵循的
//this在當前Canvas的作用域下相當於一個全域性變數
init:function(){
var canvas=document.getElementById("canvas");
this.cxt=canvas.getContext("2d");//畫筆
//瀏覽器和網頁等高等寬
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
this.cw=canvas.width;
this.ch=canvas.height;
this.num=300;//建立小圓點的個數
this.data=[];//儲存小圓點的資料
for(var i=0;i<this.num;i++){
this.data[i]={
x:Math.random()*this.cw,
y:Math.random()*this.ch,
cX:Math.random()*0.6-0.3,
cY:Math.random()*0.6-0.3
}
this.drawCircle(this.data[i].x,this.data[i].y);
}
},
//繪製粉色小點
drawCircle:function(x,y){
cxt=this.cxt;
cxt.save();//儲存路徑
cxt.fillStyle='pink';//圓的填充顏色粉紅色
cxt.beginPath();//開始路徑
cxt.arc(x,y,1,0,Math.PI*2,false);//繪畫方法
cxt.closePath();//結束路徑
cxt.fill();//填充
cxt.restore();//釋放路徑
},
//小圓點運動
moveCricle:function(){
var self=this;
var cw=this.cw;
var ch=this.ch;
self.cxt.clearRect(0,0,cw,ch);//先讓整個畫布清空
//然後在繪畫下一個點
for(var i=0;i<self.num;i++){
self.data[i].x+=self.data[i].cX;
self.data[i].y+=self.data[i].cY;
//碰撞的邊界值檢測
if(self.data[i].x>cw||self.data[i].x<0){
self.data[i].cX=-self.data[i].cX;
}
if(self.data[i].y>ch||self.data[i].y<0){
self.data[i].cY=-self.data[i].cY;
}
self.drawCircle(self.data[i].x,self.data[i].y);
//用勾股定理判斷是否連線
for(var j=i+1;j<self.num;j++){//下一點的迴圈
if(Math.pow(self.data[i].x-self.data[j].x,2)+Math.pow(self.data[i].y-self.data[j].y,2)<=50*50){
self.drawLine(self.data[i].x,self.data[i].y,self.data[j].x,self.data[j].y,false);
}
}
if(move.x){
if(Math.pow(self.data[i].x-move.x,2)+Math.pow(self.data[i].y-move.y,2)<=50*50){
self.drawLine(self.data[i].x,self.data[i].y,move.x,move.y,true);
}
}
}
},
//繪製線條
drawLine:function(x1,y1,x2,y2,isMove){
var cxt=this.cxt;
var color=cxt.createLinearGradient(x1,y1,x2,y2);
if(!isMove){
color.addColorStop(0.5,"yellow");
color.addColorStop(1,"red");
}
else{
color.addColorStop(0.5,"#ccc");
color.addColorStop(1,"#06c");
}
cxt.strokeStyle=color;
cxt.beginPath();
cxt.moveTo(x1,y1);
cxt.lineTo(x2,y2);
cxt.closePath();
cxt.stroke();//填充方式，畫線
cxt.restore();
}
}
var move={};
document.addEventListener("mousemove",function(e){
move.x=e.clientX;
move.y=e.clientY;
},false)
Canvas.init();
//時間控制元件
setInterval(function(){
Canvas.moveCricle();
},0.5)
</script>
</body>
</html>
效果：
