canvas实现鼠标粒子随机运动

最新推荐文章于 2021-10-29 14:11:50 发布

Mr.王征

最新推荐文章于 2021-10-29 14:11:50 发布

阅读量522

点赞数 2

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

本文链接：https://blog.csdn.net/wangzhneg123/article/details/87984176

版权

HTML5 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

效果展示：

源码展示：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>canvas实现鼠标粒子随机运动</title>

    <style>
        * {
            margin:0;
        }
        canvas {
            background:#cccccc;
            margin:0 auto;
            display:block;
        }
    </style>
</head>
<body>
<canvas id="lizi" width="1000" height="1000"></canvas>

<script>
    window.onload = function() {
        let canvas = document.querySelector("#lizi");
        let cobj = canvas.getContext("2d");
        let x = 500;
        let y = 10;
        canvas.onmousemove = function(e) {
            x = e.offsetX
            y = e.offsetY;
        }

        class lizi {
            constructor(canvas, cobj) {
                this.canvas = canvas;
                this.cobj = cobj;
                this.r = 10 * Math.random();
                this.x = x;
                this.y = y;
                this.speedX = 6 * Math.random() - 2;
                this.speedY = -5;
                this.g = 0.3;
                this.color = `rgb(${parseInt(255*Math.random())},${parseInt(255*Math.random())},${parseInt(255*Math.random())})`
            }
            draw() {
                this.cobj.save();
                this.cobj.beginPath();
                this.cobj.translate(this.x, this.y);
                this.cobj.arc(0, 0, this.r, 0, Math.PI * 2); //建路径 // Math.PI*2 == 2π    // 0,Math.PI*2   从0到2π
                this.cobj.fillStyle = this.color;
                this.cobj.fill();
                this.cobj.restore();
            }
            updata() {
                this.x += this.speedX;
                this.speedY += this.g;
                this.y += this.speedY;
            }
        }



        let arr = [];
        let t = setInterval(function() {
            cobj.clearRect(0, 0, 1000, 1000);
            let liziobj = new lizi(canvas, cobj);
            arr.push(liziobj);
            for (let i = 0; i < arr.length; i++) {
                arr[i].draw();
                arr[i].updata();
            }
            if (arr.length >= 200) {
                arr.shift();
            }
        }, 50)
    }
</script>

</body>
</html>

Mr.王征

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
canvas实现鼠标粒子随机运动

效果展示：源码展示：&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;canvas实现鼠标粒子随机运动&lt;/title&gt; &lt;style&gt; * { m
复制链接

扫一扫