网站首页 » 前端开发 » JavaScript » Canvas 实现炫丽的粒子运动效果(粒子跟随鼠标)
上一篇:
下一篇:

Canvas 实现炫丽的粒子运动效果(粒子跟随鼠标)

前言

关于粒子效果之前也做过一个可让粒子生成文字并带有一些动画的效果.相对来说现在要分享的这个效果会容易一些,代码量也会少一些,但效果也绝不会逊色于第一个。

效果:

Canvas 实现炫丽的粒子运动效果(粒子跟随鼠标)

在线示例:http://yunkus.com/demo/canvas/canvas-granule-animation-and-mouse-follow/

简单归简单,其中 canvas 的一些用法我们要记牢.这个效果也是从网上看到的,然后就又按自己的理解并用ES6撸了一个相似的效果.话不多说,上码:

HTML 代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Canvas 实现炫丽的粒子运动效果(粒子跟鼠标)-云库网</title>
        <style>
            body{
                padding: 0;
                margin: 0;
                overflow: hidden;
            }
            #myCanvas{
                background: #000;
            }
        </style>
    </head>
    <body>
    <canvas id="myCanvas"></canvas>
    </body>
</html>

 

JavaScript 代码
const myCanvas = document.querySelector("#myCanvas");
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
const ctx = myCanvas.getContext("2d");
const colors = ["#69d241","#a7dbd8","#f38630","#e0e4cc","fa6900","#ff4e50","#f9d423"];
const colorLen = colors.length;
let bubbles = [];
let timer = null;
let on = false;

myCanvas.onmousemove = makeBubble;

// 粒子数量控制
function makeBubble(ev){
    for(let i=0;i<6;i++){
        if(bubbles.length>600){
            bubbles.shift();
        }
        bubbles.push(getBubble(ev));
    }
    if(!on){
        timer = setInterval(renderBubbles,30);
        on = true;
    }
}

// 在 canvas 中渲染粒子
function renderBubbles(){
    ctx.clearRect(0,0,myCanvas.width,myCanvas.height);
    for(let i=0;i<bubbles.length;i++){
        if(bubbles[i].r<1){
            bubbles.splice(i,1);
            i--;
            continue;
        }
        draw(bubbles[i]);
        changeBubbleInfo(bubbles[i]);
    }
    if(bubbles.length === 0){
        clearInterval(timer);
        on = false;
    }
}

// 在 canvas 中绘制粒子
function draw(bubble){
    ctx.beginPath();
    ctx.arc(bubble.x,bubble.y,bubble.r,0,2*Math.PI);
    ctx.fillStyle = bubble.color;
    ctx.globalCompositeOperation="lighter";
    ctx.fill();
}

// 更改粒子相关参数(坐标,半径)
function changeBubbleInfo(bubble){
    bubble.r *=0.95;
    bubble.x += bubble.vx;
    bubble.y += bubble.vy;
}

// 生成随机数
function getRandom(min,max){
    return Math.floor(Math.random()*(max-min+1)+min);
}

// 生产粒子
function getBubble(ev){
    return {
        x:getRandom(-5,5)+ev.clientX,
        y:getRandom(-5,5)+ev.clientY,
        r:getRandom(5,30),
        vx:(Math.random()-0.5)*8,
        vy:(Math.random()-0.5)*8,
        color:colors[getRandom(0,colorLen)],
    }
}

最终效果你可以所上面的代码考到一个 .html 文件中运行看看,效果棒棒的.

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/canvas-granule-animation-and-mouse-follow/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END