Heim > Artikel > Web-Frontend > JS implementiert einen schönen Farbblaseneffekt, der der Maus folgt (Code im Anhang)
JS implementiert einen schönen Farbblaseneffekt, der der Maus folgt (Code im Anhang)
- 青灯夜游nach vorne
- 2020-06-16 10:22:162457Durchsuche
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.
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('#canvas');
var ctx = canvas.getContext("2d");
var starlist = [];
function init(){
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
init();
window.onresize = init;
canvas.addEventListener('mousemove',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 = 'rgb('+random(0,256)+','+random(0,256)+','+random(0,256)+')';
this.a = 1;
console.log(this.color);
this.draw();
}
Star.prototype={
draw:function(){
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.globalCompositeOperation='lighter'
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>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!