这篇文章将为大家详细讲解有关使用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> /* 首先获取canvas画布 */ var canvas = document.querySelector("#draw"); var yuan = canvas.getContext("2d"); /* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */ window.onresize=resizeCanvas; function resizeCanvas(){ canvas.width=window.innerWidth; canvas.height=window.innerHeight; } resizeCanvas(); /* 定义数组，存下面触发移动事件时产生的小圆 */ var arr = []; /* 绘制小圆形的方法，x与y是初始位置，r是圆半径 */ 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()})` /* 圆的移动方向，random函数为随机返回一个0.0到1.0的数，x可得随机正负数，y为随机正数 */ this.xZou = parseInt(Math.random()*10-5); this.yZou = parseInt(Math.random()*10); /* 向arr数组末尾添加这个元素 */ arr.push(this); } /* 更新圆形的方法 */ circle.prototype.updated = function() { /* x和y增加，呈现圆形一直走 */ this.x = this.x + this.xZou ; this.y = this.y + this.yZou ; /* 半径慢慢减少 */ this.r = this.r - 0.1 ; /* 当半径小于1清除这个圆 */ if(this.r<0){ this.remove(); } } /* 删除小圆的函数 */ circle.prototype.remove = function (){ /* 遍历数组，找到和调用这个函数相同的圆后用splice函数删除 */ 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){ /* 传入x，y，r。offsetX距离左侧距离，..， */ new circle(e.offsetX,e.offsetY,Math.random()*15); }) /* 定时器渲染小圆，开始动画 ，30毫秒一次 */ 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> /* 首先获取canvas画布 */ var canvas = document.querySelector("#draw"); var yuan = canvas.getContext("2d"); /* 绑定窗口大小发生改变事件，让canvas随时铺满浏览器可视区 */ window.onresize=resizeCanvas; function resizeCanvas(){ canvas.width=window.innerWidth; canvas.height=window.innerHeight; } resizeCanvas(); /* 定义数组，存下面触发移动事件时产生的小圆 */ var arr = []; /* 绘制小圆形的方法，x与y是初始位置，r是圆半径 */ 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()})` /* 圆的移动方向，random函数为随机返回一个0.0到1.0的数，x可得随机正负数，y为随机正数 */ this.xZou = parseInt(Math.random()*10-5); this.yZou = parseInt(Math.random()*10); /* 向arr数组末尾添加这个元素 */ arr.push(this); } /* 更新圆形的方法 */ circle.prototype.updated = function() { /* x和y增加，呈现圆形一直走 */ this.x = this.x + this.xZou ; this.y = this.y + this.yZou ; /* 半径慢慢减少 */ this.r = this.r - 0.1 ; /* 当半径小于1清除这个圆 */ if(this.r<0){ this.remove(); } } /* 删除小圆的函数 */ circle.prototype.remove = function (){ /* 遍历数组，找到和调用这个函数相同的圆后用splice函数删除 */ 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){ /* 传入x，y，r。offsetX距离左侧距离，..， */ new circle(e.offsetX,e.offsetY,Math.random()*15); }) /* 定时器渲染小圆，开始动画 ，30毫秒一次 */ 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怎么实现一个跟随鼠标的小圆特效就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
