这篇文章将为大家详细讲解有关使用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://www.lsjlt.com/news/267972.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
2024-05-16
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0