烟花

最新推荐文章于 2024-01-25 17:17:30 发布

carpe diem xt

最新推荐文章于 2024-01-25 17:17:30 发布

阅读量225

点赞数

分类专栏： my_js

本文链接：https://blog.csdn.net/u_ndefine_d/article/details/113786021

版权

my_js 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

<!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>FIRE WORKS</title>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        // 创建canvas画布
        var canvas = document.getElementById('myCanvas')
        var context = canvas.getContext('2d')
        // canvas的宽高跟随窗口的宽高改变
        function resizeCanvas() {
            canvas.width = window.innerWidth
            canvas.height = window.innerHeight
        }
        /**
         * 清除canvas
         * fillStyle: 画布的颜色
         * fillRect： 绘制画布所在的位置以及画布的宽高
         *   参数详解：(x, y, width, height)
         *   x：矩形左上角的x坐标
         *   y: 矩形左上角的y坐标
         *   width： 矩形的宽
         *   height： 矩形的高
        */
        function clearCanvas() {
            context.fillStyle = '#ffffff'
            context.fillRect(0,0,canvas.width,canvas.height)
        }
        // 监听页面
        window.addEventListener('resize', resizeCanvas, false)
        /**
         * 调用画布函数
        */
        resizeCanvas();

        // 鼠标按下的事件函数
        function mouseDownHandler(e) {
            var x = e.clientX
            var y = e.clientY
            fire(x,y)
        }
        /**
         * 创建烟花
        */
        var particles=[];
        function createFireworks(sx,sy){
            particles=[];

            var hue = Math.floor(Math.random()*51)+150;
            var hueVariance = 30;
            var count = 100;

            for(var i = 0 ;i<count;i++){
                var p = {};

                var angle = Math.floor(Math.random()*360);
                p.radians = angle * Math.PI / 180;
                p.radius = 0;

                p.sx = sx;
                p.sy = sy;

                p.speed = (Math.random()*5)+.4;

                p.size = Math.floor(Math.random()*3)+1;

                p.hue = Math.floor(Math.random()*((hue+hueVariance)-(hue-hueVariance)))+(hue-hueVariance);
                p.brightness = Math.floor(Math.random()*31)+50;
                p.alpha = (Math.floor(Math.random()*61)+40)/100;

                particles.push(p);
            }
        }
        /**
         *  开始画烟花
         *  sx: 点击位置距离当前body可视区域的 X 坐标
         *  sy: 点击位置距离当前body可视区域的 Y 坐标
        */
        function drawFireworks(sx,sy) {
            clearCanvas()

            for(var i=0; i<particles.length; i++) {
                var p = particles[i];
                p.vx = p.sx+Math.cos(p.radians) * p.radius;
                p.vy = p.sy+Math.sin(p.radians) * p.radius;
                p.radius += 1+p.speed;
                context.beginPath(); // 丢弃任何当前定义的路径，把当前的点设置成(0,0)

                /**
                 *  arc(x,y,r,sAngle,eAngle, counterclockwise): 
                 *  x: 圆中心 的x坐标
                 *  y: 圆中心 的y坐标
                 *  r: 圆的半径
                 *  sAngle：起始角，以弧度计 
                 *  eAngle： 结束角， 以弧度计
                 *  counterclockwise： 可选，false：顺时针；true：逆时针
                */
                context.arc(p.vx, p.vy, p.size, 0, Math.PI*2, false);
                context.closePath(); // 方法关闭一条打开的子路径
                context.fillStyle = 'hsla('+p.hue+', 100%, '+p.brightness+'%, '+100+')';
                context.fill(); // 开始填充
            }
        }
        var rid;

        function fire(x,y) {
            createFireworks(x,y)
            function tick() {
                //tips:注意新加入的这4行代码
                // context.globalCompositeOperation = 'destination-out';
                // context.fillStyle = 'rgba(0,0,0,'+10/100+')';
                // context.fillRect(0,0,canvas.width,canvas.height);
                // context.globalCompositeOperation = 'lighter';
                if (rid) {
                    window.clearInterval(rid)
                    rid = null
                }
                drawFireworks() // 绘制烟花
                rid=setInterval(tick,30) // 每30毫秒绘制一次
            }
            cancelAnimationFrame(rid)
            tick()
        }
        // 监听鼠标按下事件
        document.addEventListener('mousedown', mouseDownHandler, false);
        function mouseUpHandler() {
            window.clearInterval(rid)
            rid = null
        }
        // 监听鼠标按下事件
        // document.addEventListener('mouseup', mouseUpHandler, false);
       
        
    </script>
</body>
</html>```

carpe diem xt

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
烟花

<!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>FIR
复制链接

扫一扫