欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > html5库 > Canvas > 基于canvas的超酷跟随鼠标粒子动画

基于canvas的超酷跟随鼠标粒子动画

基于canvas的超酷跟随鼠标粒子动画

关键词:canvas,鼠标跟随,粒子动画,html5粒子动画,js鼠标跟随动画,canvas粒子动画,html5库,canvas

描述:这是一款基于canvas的超酷跟随鼠标粒子动画特效。该粒子跟随动画特效通过js代码,在canvas上随机生成粒子效果,并使粒子跟随鼠标移动而移动。

简要教程

这是一款基于canvas的超酷跟随鼠标粒子动画特效。该粒子跟随动画特效通过js代码,在canvas上随机生成粒子效果,并使粒子跟随鼠标移动而移动。

使用方法

在页面中引入stopExecutionOnTimeout.js文件。

<script src="js/stopExecutionOnTimeout.js" type="text/javascript"></script>
                
HTML

在页面中创建一个canvas

<canvas></canvas>
                
CSS

为canvas添加下面的CSS样式。

html{
  margin: 0;
  padding: 0;
  border: 0;
  font-family:  sans-serif;
}

canvas{
  margin: 0;
  padding: 0;
  display: block; 
  touch-action: none; 
}
                
JavaScript

在页面DOM元素加载完毕之后,通过下面方法来制作粒子跟随鼠标效果。

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);
}        
                

该基于canvas的超酷跟随鼠标粒子动画的codepen网址为:https://codepen.io/sedran/pen/oaOyvK

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/h5_canvas/9583.html

 在线演示  免费下载
编号:201901140000009583
大小:0.01MB
上传时间:2019-03-01 07:09
素材由用户"sy3045242"上传分享。

标签

最新推荐素材

与基于canvas的超酷跟随鼠标粒子动画相关的素材

.