Canvas画图之烟花爆炸demo

最新推荐文章于 2021-12-31 09:06:51 发布

We_jia

最新推荐文章于 2021-12-31 09:06:51 发布

阅读量1k

点赞数 2

分类专栏： HTML+CSS 文章标签：烟花爆炸 canvas画图

本文链接：https://blog.csdn.net/We_jia/article/details/87890161

版权

HTML+CSS 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

效果展示

canvas画图简单的烟花爆炸效果图如下：

思路分析

1.创建canvas元素

2.创建小圆圈对象，因为圆圈都是一组属性相同的数据，所以将实例化的圆圈对象都存储在数组中，方便后边圆圈消失使用splice方法删除数组元素。

注意：设置小圆圈的属性时，小球的颜色，大小(半径)，数量都是不同的，要单独设置随机方法产生，

 //创建小圆圈随机颜色方法
        this.randomColor = function () {
            return "#" + parseInt(Math.random() * 16777216).toString(16);  //转换成16进制
        };
 //创建随机数的方法
        this.randomNum = function (min, max) {
            return Math.random() * max + min;
        };

3.创建小圆圈产生的方法，传入鼠标坐标的参数，实现鼠标点击位置产生小圆圈的效果

4.创建小圆圈移动的方法，注意三个问题：

(1)圆圈在移动时移动的方向不同,不同的方向可以用随机产生的角度的cos和sin来计算，因为cos和sin出现的结果有正负，也就代表了不同的方向，

(2)小圆圈扩散的距离也不相同，扩散的距离分别计算left值和top值各增大多少，

(3)在移动的过程中，小圆圈也会越来越小,

       //创建小圆圈的方法
        this.init = function (x, y) {
            this.color = this.randomColor();
            this.x = x;     //坐标
            this.y = y;
            this.r = this.randomNum(10, 25);       //随机产生半径
            this.Angle = Math.random() * Math.PI * 2;                 //随机产生的角度
            this.AngleX=this.randomNum(6, 12)*Math.cos(this.Angle);  //x坐标移动的距离
            this.AngleY=this.randomNum(6, 12)*Math.sin(this.Angle);  //y坐标移动的距离
        };

        //小圆圈移动
        this.move=function (){
            this.x+=this.AngleX;
            this.y+=this.AngleY;
            this.r-=0.3;        //控制小圆圈的大小
            this.AngleX*=0.92;  //控制扩散的距离
            this.AngleY*=0.92;

        };

5.小圆圈的消失，当半径小于0.3时，用splice方法删除数组元素

 //小圆圈消失
    function removeBall() {
        for (var i = 0; i < balls.length; i++) {
            var b = balls[i];
            if (b.r < 0.3) {
                balls.splice(i, 1);
                i--;
            }
        }
    }

6.在canvas上画圆圈，这个方法的调用要放在计时器中

 function Draw() {
        for (var i = 0; i < balls.length; i++) {
            var b = balls[i];
            content2d.beginPath();
            content2d.fillStyle = b.color;
            content2d.arc(b.x, b.y, b.r, 0, Math.PI * 2);
            content2d.fill();
            content2d.closePath();
            b.move();  //画好后要移动
        }
    }

全部代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html, body {
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }

    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    /*以对象的实例  */
    //创建canvas元素
    var canvas = document.getElementById("canvas");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    var content2d = canvas.getContext("2d");
    var balls = [];  //存储小球对象
    //创建球球对象
    function ball() {
        this.color = null;
        this.r = null;
        this.Angle = null;
        this.x = null;
        this.y = null;
        this.AngleX = null;
        this.AngleY = null;
        //创建小球的方法
        this.init = function (x, y) {
            this.color = this.randomColor();
            this.x = x;     //坐标
            this.y = y;
            this.r = this.randomNum(10, 25);
            this.Angle = Math.random() * Math.PI * 2;                 //随机产生的角度
            this.AngleX = this.randomNum(6, 12) * Math.cos(this.Angle);  //x坐标移动的距离
            this.AngleY = this.randomNum(6, 12) * Math.sin(this.Angle);  //y坐标移动的距离
        };

        //小球移动
        this.move = function () {
            this.x += this.AngleX;
            this.y += this.AngleY;
            this.r -= 0.3;
            this.AngleX *= 0.92;  //控制扩散的距离
            this.AngleY *= 0.92;

        };
        //创建小球随机颜色方法
        this.randomColor = function () {
            return "#" + parseInt(Math.random() * 16777216).toString(16);
        };
        //创建随机数的方法
        this.randomNum = function (min, max) {
            return Math.random() * max + min;
        };
    }

    //实例化球球
    function createBall(x, y) {
        var count = parseInt(Math.random() * 30 + 10);
        for (var i = 0; i < count; i++) {
            var b = new ball();
            b.init(x, y);
            balls.push(b);
        }
    }

    //在canvas上画球球
    function Draw() {
        for (var i = 0; i < balls.length; i++) {
            var b = balls[i];
            content2d.beginPath();
            content2d.fillStyle = b.color;
            content2d.arc(b.x, b.y, b.r, 0, Math.PI * 2);
            content2d.fill();
            content2d.closePath();
            b.move();  //画好后要移动
        }
    }

    //小球消失
    function removeBall() {
        for (var i = 0; i < balls.length; i++) {
            var b = balls[i];
            if (b.r < 0.3) {
                balls.splice(i, 1);
                i--;
            }
        }
    }

    //鼠标事件
    canvas.onmouseup = function (e) {
        var x = e.pageX;
        var y = e.pageY;
        createBall(x, y);
    };
    loop();
    function loop() {
        //清除整个画布
        content2d.clearRect(0, 0, canvas.width, canvas.height);
        Draw();
        removeBall();
        window.requestAnimationFrame(loop);
        /* 告诉浏览器您要执行的动画并且请求浏览器的在下一个动画帧重绘窗口,方法在浏览器重绘之前作为一个回调函数被调用,
         就是告诉浏览器在刷新屏幕的时候，调用这个方法*/
    }
</script>
</body>
</html>

We_jia

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Canvas画图之烟花爆炸demo

效果展示canvas画图简单的烟花爆炸效果图如下：思路分析1.创建canvas元素2.创建小圆圈对象，因为圆圈都是一组属性相同的数据，所以将实例化的圆圈对象都存储在数组中，方便后边圆圈消失使用splice方法删除数组元素。注意：设置小圆圈的属性时，小球的颜色，大小(半径)，数量都是不同的，要单独设置随机方法产生， //创建小圆圈随机颜色方法 this....
复制链接

扫一扫