canvas实现烟花特效-蒲公英云

canvas实现烟花特效

短命女 2022-03-17 08:27 591阅读 0赞

看过我之前博客的人一定都知道我对canvas赞不绝口，没看过？那就看看下面这篇吧，总结一下对canvas的使用心得就是盘它！

实现效果：

代码如下，注释已写：

<!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>烟花爆炸动画</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        html,
        body {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<canvas id="canvas"></canvas>
<script>
    var canvas = document.getElementById('canvas'); //获取canvas
    canvas.width = window.innerWidth; //设置画布大小
    canvas.height = window.innerHeight;
    var content2d = canvas.getContext('2d'); //转化为2d模式
    var balls = []; //建立数组用于存放小球
    function ball() { //构造函数方法开发
        this.color = null; //分别为小球的颜色，x y坐标，半径，角度，角度移动x，y坐标
        this.x = null;
        this.y = null;
        this.r = null;
        this.Angle = null;
        this.Anglex = null;
        this.Angley = null;
        this.init = function (x, y) {
            // 初始化状态
            this.x = x;
            this.y = y;
            this.r = this.randomNum(15, 25);
            this.color = this.randomColor();
            this.Angle = Math.random() * Math.PI * 2;
            this.Anglex = this.randomNum(10, 12) * Math.cos(this.Angle); //利用三角函数来控制小球的移动方向
            this.Angley = this.randomNum(10, 12) * Math.sin(this.Angle);
        };
        this.randomColor = function () { //随机颜色
            return "#" + parseInt(Math.random() * 16777216).toString(16);
        };
        this.randomNum = function (max, min) { //随机坐标**/*-*-+**
            return Math.random() * max + min;
        };
        this.move = function () {//利用坐标的偏移和半径的减少和重绘来实现小球的移动
            this.x += this.Anglex * 1.1;
            this.y += this.Angley * 1.1;
            this.r -= 0.35;
            this.Anglex *= 0.92;
            this.Angley *= 0.92;
        }
    }
    function createBall(x, y) {
        var count = parseInt(Math.random() * 15 + 15);//随机小球数量
        for (var i = 0; i < count; i++) {
            var b = new ball();
            b.init(x, y);
            balls.push(b);
        }
    }
    function Draw() {
        for (var i = 0; i < balls.length; i++) {
            var b = balls[i];
            b.move();
            content2d.beginPath();
            content2d.fillStyle = b.color;
            content2d.arc(b.x, b.y, b.r, 0, Math.PI * 2);
            content2d.fill();
            content2d.closePath();
            // console.log(1);
        }
    }
    function removeBall() {//如果小球的半径小于等值，移除小球
        for (var i = 0; i < balls.length; i++) {
            var b = balls[i];
            if (b.r < 0.35) {
                balls.splice(i, 1);
                i--;
            }
        }
    }
    loop();
    function loop() {//（重绘）h5 计时器，强大好用
        // 清除整个canvas
        content2d.clearRect(0, 0, canvas.width, canvas.height);
        Draw();
        removeBall();
        // console.log(1);
        window.requestAnimationFrame(loop);
    }
    canvas.onclick = function (e) {
        var x = e.pageX;
        var y = e.pageY;
        // console.log(x);
        createBall(x, y);
    }
</script>
<body>
</body>
</html>