使用canvas怎么实现一个跟随鼠标的小圆特效

2023-06-14 05:06:35 467人浏览八月长安

摘要

这篇文章将为大家详细讲解有关使用canvas怎么实现一个跟随鼠标的小圆特效，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。实现：1.定义标签： <h2>北极光之夜<

这篇文章将为大家详细讲解有关使用canvas怎么实现一个跟随鼠标的小圆特效，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

实现：

1.定义标签：

 <h2>北极光之夜</h2>  <canvas id="draw" >    当前浏览器不支持Canvas，请更换浏览器后再试  </canvas>

2. 文字的基本样式：

h2{      position: absolute;      top: 50%;      left: 50%;      transfORM: translate(-50%,-50%);      font-size: 5em;      font-family: 'fangsong';      color: rgb(38, 205, 247);    }

top: 50%;
left: 50%;
transform: translate(-50%,-50%); 居中对齐
3. js部分，详细看注释：

<script>        var canvas = document.querySelector("#draw");    var yuan = canvas.getContext("2d");            window.onresize=resizeCanvas;    function resizeCanvas(){      canvas.width=window.innerWidth;      canvas.height=window.innerHeight;    }    resizeCanvas();         var arr = [];            function circle (x,y,r){      this.x=x;      this.y=y;      this.r=r;            this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`            this.xZou = parseInt(Math.random()*10-5);      this.yZou = parseInt(Math.random()*10);                 arr.push(this);    }         circle.prototype.updated = function() {             this.x = this.x + this.xZou ;      this.y = this.y + this.yZou ;            this.r = this.r - 0.1 ;            if(this.r<0){        this.remove();      }     }          circle.prototype.remove = function (){             for(let i=0;i<arr.length;i++){         if(this==arr[i])         {           arr.splice(i,1);         }      }    }          circle.prototype.render = function(){      yuan.beginPath();      yuan.arc(this.x,this.y,this.r,0,2*3.14,false);      yuan.fillStyle = this.color;      yuan.fill();     }              canvas.addEventListener('mousemove',function(e){             new circle(e.offsetX,e.offsetY,Math.random()*15);      })             setInterval(function(){                 yuan.clearRect(0,0,canvas.width,canvas.height);                for(let i=0;i<arr.length;i++){                    arr[i].updated();                    if(arr[i].render()){            arr[i].render();          }                  }     },30)  </script>

canvas链接
splice（）方法链接
random（）方法链接
push（）方法链接
resize事件链接

完整源码：

<!DOCTYPE html><html lang="zh-CN"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    *{      margin: 0;      padding: 0;      box-sizing: border-box;    }        body{      background-color: rgb(72, 75, 122);    }        h2{      position: absolute;      top: 50%;      left: 50%;      transform: translate(-50%,-50%);      font-size: 5em;      font-family: 'fangsong';      color: rgb(38, 205, 247);    }     </style></head><body>     <h2>北极光之夜</h2>  <canvas id="draw" >    当前浏览器不支持Canvas，请更换浏览器后再试  </canvas>  <script>        var canvas = document.querySelector("#draw");    var yuan = canvas.getContext("2d");            window.onresize=resizeCanvas;    function resizeCanvas(){      canvas.width=window.innerWidth;      canvas.height=window.innerHeight;    }    resizeCanvas();         var arr = [];            function circle (x,y,r){      this.x=x;      this.y=y;      this.r=r;            this.color = `rgb(${255*Math.random()},${255*Math.random()},${255*Math.random()})`            this.xZou = parseInt(Math.random()*10-5);      this.yZou = parseInt(Math.random()*10);                 arr.push(this);    }         circle.prototype.updated = function() {             this.x = this.x + this.xZou ;      this.y = this.y + this.yZou ;            this.r = this.r - 0.1 ;            if(this.r<0){        this.remove();      }     }          circle.prototype.remove = function (){             for(let i=0;i<arr.length;i++){         if(this==arr[i])         {           arr.splice(i,1);         }      }    }          circle.prototype.render = function(){      yuan.beginPath();      yuan.arc(this.x,this.y,this.r,0,2*3.14,false);      yuan.fillStyle = this.color;      yuan.fill();     }              canvas.addEventListener('mousemove',function(e){             new circle(e.offsetX,e.offsetY,Math.random()*15);      })             setInterval(function(){                 yuan.clearRect(0,0,canvas.width,canvas.height);                for(let i=0;i<arr.length;i++){                    arr[i].updated();                    if(arr[i].render()){            arr[i].render();          }                  }     },30)  </script></body></html>

关于使用canvas怎么实现一个跟随鼠标的小圆特效就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

--结束END--

本文标题: 使用canvas怎么实现一个跟随鼠标的小圆特效

本文链接: https://lsjlt.com/news/267972.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341