js+canvas画布制作烟花

先看看烟花自动播放效果：

实现步骤如下：

1.将html与body填满整个屏幕

html,
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

2.获取画布，设置宽高，调用getContext方法

var myCanvas = document.getElementsByTagName("canvas")[0];
var ctx = myCanvas.getContext('2d');
//规定画布大小
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;

3.创建方法，用于将画布填充成黑色

//创建方法，用于将画布填充成黑色
//填充画布
function fillCanvas() {
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
}
fillCanvas();

4.创建烟火，有各种属性（半径、大小、坐标等）

//创建烟火，有各种属性（半径、大小、坐标等）
var Fireworks = [];//烟火
function createFireworks(cx, cy) {
    var count = 150;//烟火的个数
    for (var i = 0; i < count; i++) {
        var fire = {};//烟火对象
        var angle = Math.floor(Math.random() * 360);//角度
        fire.radians = angle * Math.PI / 180;//弧度
        fire.x = cx;
        fire.y = cy;
        fire.speed = Math.random() * 5;//速度
        fire.radius = fire.speed;//半径
        fire.size = Math.ceil(Math.random() * 4);//大小
        fire.hue = Math.floor(Math.random() * 100) + 150;//颜色
        fire.brightness = Math.floor(Math.random() * 31) + 50;//亮度
        fire.alpha = (Math.floor(Math.random() * 61) + 40) / 100;//透明度
        Fireworks.push(fire);//添加
    }
}

5.创建绘画烟花的方法，用于实现烟花的效果

function drawFireworks() {
    fillCanvas();
    for (var i = 0; i < Fireworks.length; i++) {
        var fire = Fireworks[i];
        var vx = Math.cos(fire.radians) * fire.radius;//小球水平方向落下时的距离
        var vy = Math.sin(fire.radians) * fire.radius + 0.4;//小球落下时的距离
        fire.x += vx;
        fire.y += vy;
        fire.radius *= 1 - fire.speed / 100;//半径
        fire.alpha -= 0.005;//透明度
        //判断透明度小于等于零就被删除
        if (fire.alpha <= 0) {
            Fireworks.splice(i, 1);
            continue;
        }
        ctx.beginPath();
        // 中心坐标 半径  角度
        ctx.arc(fire.x, fire.y, fire.size, 0, Math.PI * 2);
        // 颜色 饱和度 亮度  透明度
        ctx.fillStyle = 'hsla(' + fire.hue + ', 100%,' + fire.brightness + '%, ' + fire.alpha + ')';
        ctx.fill();
    }
}

6.创建烟花烟雾拖尾的效果

function tick() {
    // globalCompositeOperation 属性设置或返回如何将一个源（新的）图像绘制到目标（已有）的图像上。
    // destination-out 在源图像外显示目标图像。只有源图像外的目标图像部分会被显示，源图像是透明的。
    ctx.globalCompositeOperation = 'destination-out';
    ctx.fillStyle = 'rgba(0,0,0,' + 0.1 + ')';
    ctx.fillRect(0, 0, myCanvas.width, myCanvas.height);
    // lighter 显示源图像 + 目标图像。
    ctx.globalCompositeOperation = 'lighter';
    drawFireworks();//画烟火
    // 浏览器下次重绘之前继续更新下一帧动画
    requestAnimationFrame(tick);
}
tick();

7.使用循环定时器，在屏幕上自动绽放烟花,这时烟花已经可以自动绽放

//当前视口随机创建烟花
setInterval(function () {
    createFireworks(Math.random() * myCanvas.width, Math.random() * myCanvas.height);
}, 1000);

此时我们已经完成烟花在画布上自动绽放的效果，效果如下：。