web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置:
首页
>
网页特效
>
粒子特效
基于canvas的超酷跟随鼠标粒子动画
分类:
粒子特效
日期:
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
在页面中引入stopExecutionOnTimeout.js文件。 ```html ``` ##### HTML 在页面中创建一个canvas。 ```html
``` ##### CSS 为canvas添加下面的CSS样式。 ```html html{ margin: 0; padding: 0; border: 0; font-family: sans-serif; } canvas{ margin: 0; padding: 0; display: block; touch-action: none; } ``` ##### JavaScript 在页面DOM元素加载完毕之后,通过下面方法来制作粒子跟随鼠标效果。 ```html var canvas = document.querySelector('canvas'); canvas.height = window.innerHeight; canvas.width = window.innerWidth; c = canvas.getContext('2d'); window.addEventListener('resize', function () { canvas.height = window.innerHeight; canvas.width = window.innerWidth; initCanvas(); }); var mouse = { x: undefined, y: undefined }; window.addEventListener('mousemove', function (event) { mouse.x = event.x; mouse.y = event.y; drawCircles(); }); window.addEventListener("touchmove", function (event) { let touch = event.touches[0]; mouse.x = touch.clientX; mouse.y = touch.clientY; drawCircles(); }); function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life) { this.x = x; this.y = y; this.radius = radius; this.minRadius = radius; this.vx = vx; this.vy = vy; this.birth = birth; this.life = life; this.opacity = opacity; this.draw = function () { c.beginPath(); c.arc(this.x, this.y, this.radius, Math.PI * 2, false); c.fillStyle = 'rgba(' + rgb + ',' + this.opacity + ')'; c.fill(); }; this.update = function () { if (this.x + this.radius > innerWidth || this.x - this.radius < 0) { this.vx = -this.vx; } if (this.y + this.radius > innerHeight || this.y - this.radius < 0) { this.vy = -this.vy; } this.x += this.vx; this.y += this.vy; this.opacity = 1 - (frame - this.birth) * 1 / this.life; if (frame > this.birth + this.life) { for (let i = 0; i < circleArray.length; i++) { if (this.birth == circleArray[i].birth && this.life == circleArray[i].life) { circleArray.splice(i, 1); break; } } } else { this.draw(); } }; } var circleArray = []; function initCanvas() { circleArray = []; } var colorArray = [ '355,85,80', '9,80,100', '343,81,45']; function drawCircles() { for (let i = 0; i < 6; i++) { let radius = Math.floor(Math.random() * 4) + 2; let vx = Math.random() * 2 - 1; let vy = Math.random() * 2 - 1; let spawnFrame = frame; let rgb = colorArray[Math.floor(Math.random() * colorArray.length)]; let life = 100; circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life)); } } var frame = 0; function animate() { requestAnimationFrame(animate); frame += 1; c.clearRect(0, 0, innerWidth, innerHeight); for (let i = 0; i < circleArray.length; i++) { circleArray[i].update(); } } initCanvas(); animate(); // This is just for demo purposes : for (let i = 1; i < 110; i++) { (function (index) { setTimeout(function () { mouse.x = 100 + i * 10; mouse.y = 100; drawCircles(); }, i * 10); })(i); } ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告