Maison >interface Web >js tutoriel >JS implémente un bel effet de bulle de couleur qui suit la souris (code ci-joint)

JS implémente un bel effet de bulle de couleur qui suit la souris (code ci-joint)

青灯夜游avant: 2020-06-16 10:22:162635parcourir

L'article suivant vous présentera JS pour obtenir un magnifique effet de bulle de couleur qui suit la souris. L'exemple de code dans l'article est présenté de manière très détaillée. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

Code spécifique :

<!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>

Pour plus d'effets spéciaux jQuery et Javascript, il est recommandé de visiter : collection d'effets spéciaux js!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Devriez-vous choisir le parcours de boucle pour des raisons de performances ?Article suivant：Devriez-vous choisir le parcours de boucle pour des raisons de performances ?

Articles Liés

Voir plus