canvas点击出现星星效果

阁下呀

已于 2023-11-20 14:51:15 修改

阅读量81

点赞数 2

文章标签：前端 javascript

于 2023-11-13 10:54:38 首次发布

本文链接：https://blog.csdn.net/m0_70139540/article/details/134371997

版权

之前看了点canvas，觉得挺有意思的，算是记录一下吧（挺适合初学者）

监听点击事件存储数据，这块自定义即可，像星星在运动的时候也可家转动（我这里是没加的）

里面感觉麻烦点的就是星星自下而上这个速度的控制，这块当时是自己试出来的

绘制星星

更新星星位置

清除画布 15也是自己试出来的想快点可以小一点

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>阁下</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #canvas {
            background-color: #000;
        }

        .text {
            font-size: 35px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            color: rgb(255, 255, 255 , 0.6);
            user-select: none;
            text-shadow: 
            0px 0px 5px rgb(255, 255, 255,0.6),
            0px 0px 10px rgb(255, 255, 255,0.5),
            0px 0px 15px rgb(255, 255, 255,0.4),
            0px 0px 20px rgb(255, 255, 255,0.3);
        }
    </style>
</head>

<body>
    <div class="text">如果再也不能见到你，那祝你早安、午安、晚安。</div>
    <canvas id="canvas"></canvas>
    <script>
        // 获取dom
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        // 监听窗口大小
        window.addEventListener("resize", resizeFn);
        function resizeFn() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        }
        resizeFn();

        // 初始变量
        var num = 10;//星星数量
        var arr = [];//总数据
        var box = [//星星纵轴加速度
            {
                num: 5,
                val: 0.166
            },
            {
                num: 3,
                val: 0.1
            },
            {
                num: 4,
                val: 0.13
            },
            {
                num: 2,
                val: 0.06
            },
            {
                num: 6,
                val: 0.2
            },
            {
                num: 1,
                val: 0.03
            }
        ];
        // 监听click
        canvas.addEventListener("click", function (e) {
            let list = [];
            for (let i = 0; i < num; i++) {
                list.push({
                    x: e.clientX,
                    y: e.clientY,
                    r: 2,//小圆半径
                    l: 5,//大圆半径
                    angle: 72,//五角星角度 360 / 5
                    color: `rgb(${parseInt(Math.random() * 255)}, ${parseInt(Math.random() * 255)}, ${parseInt(Math.random() * 255)})`,//随机颜色

                    startY: e.clientY,//初始位置y
                    move: (Math.random() * 2) - 1,//随机生成星星方向 1：左 -1：右
                    hei: 100 * Math.random() + 100,//随机限制星星最大高度
                    isTop: true,//判断星星状态向上活向下   true：上 false：下

                    // y轴方向数据
                    // ratio: 30,//距离的变化  5 / 0.15
                    speedObj: JSON.parse(JSON.stringify(box[Math.floor(Math.random() * 5)])),
                    // speedObj: { num: 7, val: 0.23 }  //示例 当为7时 数列数列公差d为0.23
                    // x轴方向数据
                    numX: Math.random() * 5
                })
            }
            // 点击一次，添加一个对象
            arr.push(list);
            // 开始绘制星星
            draw(arr[arr.length - 1]);
        })

        // 绘制星星
        function draw(data) {
            for (let j = 0; j < data.length; j++) {
                ctx.beginPath();
                ctx.strokeStyle = data[j].color;
                ctx.fillStyle = data[j].color;
                ctx.lineJoin = "round";
                ctx.lineWidth = 1;
                for (let i = 1; i < 6; i++) {
                    ctx.lineTo(data[j].l * Math.cos(data[j].angle * (Math.PI / 180) * i) + data[j].x, data[j].l * Math.sin(data[j].angle * (Math.PI / 180) * i) + data[j].y);
                    ctx.lineTo(data[j].r * Math.cos((data[j].angle * i + 36) * (Math.PI / 180)) + data[j].x, data[j].r * Math.sin((data[j].angle * i + 36) * (Math.PI / 180)) + data[j].y);
                }
                ctx.stroke();
                ctx.fill();
            }
        }

        // 更新星星位置
        function update() {
            if (arr.length > 0) {
                for (let i = 0; i < arr.length; i++) {
                    if (arr[i].length > 0) {
                        for (let j = 0; j < arr[i].length; j++) {

                            // 控制Y轴方向
                            if (arr[i][j].hei + arr[i][j].y > arr[i][j].startY && arr[i][j].isTop) {
                                arr[i][j].y = arr[i][j].y - arr[i][j].speedObj.num;
                                arr[i][j].speedObj.num = arr[i][j].speedObj.num - arr[i][j].speedObj.val;
                            } else {
                                arr[i][j].isTop = false;
                                arr[i][j].y = arr[i][j].y + arr[i][j].speedObj.num;
                                arr[i][j].speedObj.num = arr[i][j].speedObj.num + arr[i][j].speedObj.val;
                            }

                            // 控制X轴方向
                            if (arr[i][j].move < 0) {
                                arr[i][j].x = arr[i][j].x - arr[i][j].numX;
                            } else {
                                arr[i][j].x = arr[i][j].x + arr[i][j].numX;
                            }

                            if (arr[i][j].numX < 0) {
                                arr[i][j].numX = 0;
                            } else {
                                arr[i][j].numX = arr[i][j].numX - 0.01;
                            }


                            // 更新星星位置
                            draw(arr[i]);
                            // 超出清除
                            if (arr[i][j].y > window.innerHeight) arr[i].splice(j, 1);
                        }
                        // 超出清除
                        if (arr[i].length == 0) arr.splice(i, 1);
                    }
                }
            }
        }

        setInterval(() => {
            // 更新每一帧
            if (arr.length >= 0) {
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                // 更新位置
                update();
            }
        }, 15)
    </script>
</body>

</html>

以上只是自己再学习的一点感悟，大佬勿进0.0