canvas鼠标跟随的粒子小泡（js）

最新推荐文章于 2025-02-14 22:47:58 发布

Mr.王征

最新推荐文章于 2025-02-14 22:47:58 发布

阅读量446

点赞数 7

CC 4.0 BY-SA版权

分类专栏： HTML5 文章标签： canvas鼠标跟随效果 canvas粒子效果

本文链接：https://blog.youkuaiyun.com/wangzhneg123/article/details/88075650

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas鼠标跟随的粒子小泡（js）</title>
</head>
<body>
<canvas id="canvas"></canvas>

<script>
    var Canvas = document.getElementById("canvas");
    Canvas.width = window.innerWidth;
    Canvas.height = window.innerHeight;
    var can = Canvas.getContext("2d");

    function randNum(min, max) {
        return parseInt(Math.random() * (max - min + 1) + min);
    }

    function ball(clientX, clientY) {
        this.ballX = clientX;
        this.ballY = clientY;
        this.ballR = randNum(5, 10);
        this.sp