有的朋友可能对于“canvas怎样做出黑色背景带特效碎屑烟花 jscanvas多彩油墨烟雾背景特效”还有很多不明白的地方，下面由77ISP云服务器技术小编为大家讲解一下，下面我们来一起看看吧！

这次给大家带来canvas怎样做出黑色背景带特效碎屑烟花，canvas做出黑色背景带特效碎屑烟花的注意事项有哪些，下面就是实战案例，一起来看一下。

浏览器不支持canvas
    
    新年快乐
    阖家欢乐
    万事如意
    心想事成

css

body { margin: 0; padding: 0; overflow: hidden;
}.city { width: 100%; position: fixed; bottom: 0px; z-index: 100;
}.city img { width: 100%;
}

js

var canvas = document.getElementById("cas");var ocas = document.createElement("canvas");var octx = ocas.getContext("2d");var ctx = canvas.getContext("2d");
ocas.width = canvas.width = window.innerWidth;
ocas.height = canvas.height = window.innerHeight;var bigbooms = [];window.onload = function () {
    initAnimate()
}function initAnimate() {
    drawBg();
    lastTime = new Date();
    animate();
}var lastTime;function animate() {
    ctx.save();
    ctx.fillStyle = "rgba(0,5,24,0.1)";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();    var newTime = new Date();    if (newTime - lastTime > 500 + (window.innerHeight - 767) / 2) {        var random = Math.random() * 100 > 2 ? true : false;        var x = getRandom(canvas.width / 5, canvas.width * 4 / 5);        var y = getRandom(50, 200);        if (random) {            var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {                x: x,                y: y
            });
            bigbooms.push(bigboom)
        } else {            var bigboom = new Boom(getRandom(canvas.width / 3, canvas.width * 2 / 3), 2, "#FFF", {                x: canvas.width / 2,                y: 200
            }, document.querySelectorAll(".shape")[parseInt(getRandom(0, document.querySelectorAll(                ".shape").length))]);
            bigbooms.push(bigboom)
        }
        lastTime = newTime;
    }
    stars.foreach(function () {        this.paint();
    })
    drawMoon();
    bigbooms.foreach(function (index) {        var that = this;        if (!this.dead) {            this._move();            this._drawLight();
        } else {            this.booms.foreach(function (index) {                if (!this.dead) {                    this.moveTo(index);
                } else if (index === that.booms.length - 1) {
                    bigbooms[bigbooms.indexOf(that)] = null;
                }
            })
        }
    });
    raf(animate);
}function drawMoon() {    var moon = document.getElementById("moon");    var centerX = canvas.width - 200,
        centerY = 100,
        width = 80;    if (moon.complete) {
        ctx.drawImage(moon, centerX, centerY, width, width)
    } else {
        moon.onload = function () {
            ctx.drawImage(moon, centerX, centerY, width, width)
        }
    }    var index = 0;    for (var i = 0; i = 5 ? 1 : 2;        var color;        if (style === 1) {
            color = {                a: parseInt(getRandom(128, 255)),                b: parseInt(getRandom(128, 255)),                c: parseInt(getRandom(128, 255))
            }
        }        var fanwei = parseInt(getRandom(300, 400));        for (var i = 0; i = 0) {
        img.src = ele.
getElementsByTagName
("img")[0].src;
        imgload(img, function () {
            context.drawImage(img, canvas.width / 2 - img.width / 2, canvas.height / 2 - img.width / 2);
            dots = getimgData(canvas, context, dr);
            callback(dots);
        })
    } else {        var text = ele.innerHTML;
        context.save();        var fontSize = 200;
        context.font = fontSize + "px 宋体 bold";
        context.textAlign = "center";
        context.textBaseline = "middle";
        context.fillStyle = "rgba(" + parseInt(getRandom(128, 255)) + "," + parseInt(getRandom(128, 255)) + "," +            parseInt(getRandom(128, 255)) + " , 1)";
        context.fillText(text, canvas.width / 2, canvas.height / 2);
        context.restore();
        dots = getimgData(canvas, context, dr);
        callback(dots);
    }
}function imgload(img, callback) {    if (img.complete) {
        callback.call(img);
    } else {
        img.onload = function () {
            callback.call(this);
        }
    }
}function getimgData(canvas, context, dr) {    var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
    context.clearRect(0, 0, canvas.width, canvas.height);    var dots = [];    for (var x = 0; x  128) {                var dot = {                    x: x,                    y: y,                    a: imgData.data[i],                    b: imgData.data[i + 1],                    c: imgData.data[i + 2]
                };
                dots.push(dot);
            }
        }
    }    return dots;
}function getRandom(a, b) {    return Math.random() * (b - a) + a;
}var maxRadius = 1,
    stars = [];function drawBg() {    for (var i = 0; i

以上就是“canvas怎样做出黑色背景带特效碎屑烟花 jscanvas多彩油墨烟雾背景特效”的详细内容，更多请关注77isp云服务器技术网其它相关文章！