canvas--随机粒子

最新推荐文章于 2022-02-22 00:59:03 发布

_冷月心

最新推荐文章于 2022-02-22 00:59:03 发布

阅读量815

点赞数 2

分类专栏： js+css 文章标签： canvas--随机粒子

本文链接：https://blog.csdn.net/qq_42813491/article/details/102698594

版权

js+css 专栏收录该内容

162 篇文章 3 订阅

订阅专栏

学习资源推荐

微信扫码关注公众号：前端前端大前端，追求更精致的阅读体验，一起来学习啊
关注后发送关键资料,免费获取一整套前端系统学习资料和老男孩python系列课程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>canvas--随机粒子</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
            background-color:#000;
        }
    </style>
</head>

<body>

    <canvas id='canvas'></canvas>

    <script>

        const canvas = document.getElementById("canvas");


        const ctx = canvas.getContext("2d");

        const WIDTH = document.documentElement.clientWidth;
        const HEIGHT = document.documentElement.clientHeight;

        canvas.width = WIDTH;
        canvas.height = HEIGHT;


        // 创建粒子对象 

        function Particle(x, y) {
            this.symbol = Symbol();//粒子标识 确保每个粒子不一样
            this.x = x;//x坐标
            this.y = y;//y坐标
            this.r = (Math.random() * 20) + 1;//半径
            let cr = Math.random() * 256;
            let cg = Math.random() * 256;
            let cb = Math.random() * 256;
            let alpha = (Math.floor(Math.random() * 10) + 1) / 10; //0.05-0.5 透明度--为了好看
            this.color = `rgba(${cr},${cg},${cb},${alpha})`;//颜色 
        }

        //Particle原型上添加绘制方法 draw

        Particle.prototype.draw = function () {

            //开始新路径
            ctx.beginPath();
            //画⚪ x,y坐标 r半径 起始弧度 结束弧度
            ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
            //闭合路径
            ctx.closePath();
            //填充样式
            ctx.fillStyle = this.color;
            //模糊程度
            ctx.shadowBlur = this.r * 2;
            //填充
            ctx.fill();

        }



        // 通过改变粒子纵坐标位置 模拟粒子升降
        Particle.prototype.move = function (step=1.5) {
            this.y -= step;//运动速度
            //看不见了就再来一次
            if (this.y <= -10) {
                this.y = HEIGHT + 10;
            }
            //重绘
            this.draw();
        }
        let arr = [];

        function init(len = 100) {

            for (let i = 0; i < len; i++) {
                //填充粒子数组
                arr[i] = new Particle(Math.random() * WIDTH, Math.random() * HEIGHT);
                //批量绘制
                arr[i].draw();
            }
            animate();
        }


        // 粒子一起动起来
        function animate() {

            //每次运动前清空画布
            ctx.clearRect(0, 0, WIDTH, HEIGHT);

            arr.forEach(item => {

                item.move();

            })

            requestAnimationFrame(animate);
        }


        init();



    </script>
</body>

</html>

在这里插入图片描述