JS implementiert einen schönen Farbblaseneffekt, der der Maus folgt (Code im Anhang)-js-Tutorial-php.cn

JS implementiert einen schönen Farbblaseneffekt, der der Maus folgt (Code im Anhang)

青灯夜游

Freigeben： 2020-06-16 10:26:33

nach vorne

2642 Leute haben es durchsucht

Der folgende Artikel führt Sie in JS ein, um einen schönen Farbblaseneffekt mit der Maus zu erzielen. Der Beispielcode im Artikel wird ausführlich vorgestellt. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

JS implementiert einen schönen Farbblaseneffekt, der der Maus folgt (Code im Anhang)

Spezifischer Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
 
<style>
 *{
 margin:0;padding:0;
 }
 body{overflow:hidden;}
 #canvas{
 background-color:black;
 /*width:100%;
 height:100vh;*/
 }
  
</style>
 
</head>
<body>
 
<canvas id="canvas" ></canvas> 
  
</body>
 
<script>
var canvas = document.querySelector(&#39;#canvas&#39;);
var ctx = canvas.getContext("2d");
var starlist = [];
function init(){
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
}
init();
window.onresize = init;
 
canvas.addEventListener(&#39;mousemove&#39;,function(e){
 starlist.push(new Star(e.offsetX,e.offsetY));
 console.log(starlist)
})
 
function random(min,max){
 return Math.floor((max-min)*Math.random()+ min);
}
 
function Star(x,y){
 this.x = x;
 this.y = y;
 this.vx = (Math.random()-0.5)*3;
 this.vy = (Math.random()-0.5)*3;
 this.color = &#39;rgb(&#39;+random(0,256)+&#39;,&#39;+random(0,256)+&#39;,&#39;+random(0,256)+&#39;)&#39;;
 this.a = 1;
 console.log(this.color);
 this.draw();
}
Star.prototype={
 draw:function(){
 ctx.beginPath();
 ctx.fillStyle = this.color;
 ctx.globalCompositeOperation=&#39;lighter&#39;
 ctx.globalAlpha= this.a;
 ctx.arc(this.x,this.y,30,0,Math.PI*2,false);
 ctx.fill();
 this.updata();
 },
 updata(){
 this.x+=this.vx;
 this.y+=this.vy;
 this.a*=0.98;
 }
}
console.log(new Star(150,200));
function render(){
 ctx.clearRect(0,0,canvas.width,canvas.height)
  
 starlist.forEach((item,i)=>{
 item.draw();
 if(item.a<0.05){
 starlist.splice(i,1);
 }
 })
  
 requestAnimationFrame(render);
}
render(); 
 
</script>
<div style="text-align:center;">
</div>
 
</html>

Nach dem Login kopieren

Für weitere jQuery- und Javascript-Spezialeffekte wird empfohlen, die js-Spezialeffektsammlung!

Das obige ist der detaillierte Inhalt vonJS implementiert einen schönen Farbblaseneffekt, der der Maus folgt (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!