How to make cyan fireworks with black background in canvas

This time I will show you how to make cyan fireworks with a black background using canvas. What are the precautions for making cyan fireworks with a black background using canvas. Here is a practical case, let’s take a look.

html

<canvas></canvas><h1>201<span>8</span></h1>

css

html,body {    padding: 0px;    margin: 0px;    background: #222;    font-family: 'Karla', sans-serif;    color: #FFF;    height: 100%;    overflow: hidden;
}h1 {    z-index: 1000;    position: fixed;    top: 50%;    left: 50%;    transform: translateX(-50%) translateY(-100%);    font-size: 58px;    overflow: hidden;
}span {    position: relative;    display: inline-block;    animation: drop 0.75s ease 0s;
}canvas {    width: 100%;    height: 100%;
}
@keyframes drop {
    0% {        transform: translateY(-100px);        opacity: 0;
    }
    90% {        opacity: 1;        transform: translateY(10px);
    }
    100% {        transform: translateY(0px);
    }
}

js

var ctx = document.querySelector(&#39;canvas&#39;).getContext(&#39;2d&#39;)ctx.canvas.width = window.innerWidthctx.canvas.height = window.innerHeightvar sparks = []var fireworks = []var i = 20;while (i--) {    fireworks.push(        new Firework(Math.random() * window.innerWidth, window.innerHeight * Math.random())    )}render()function render() {    setTimeout(render, 1000 / 60)    ctx.fillStyle = &#39;rgba(0, 0, 0, 0.1)&#39;;    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height)    for (var firework of fireworks) {        if (firework.dead) continue        firework.move()        firework.draw()    }    for (var spark of sparks) {        if (spark.dead) continue        spark.move()        spark.draw()    }    if (Math.random() < 0.05) {        fireworks.push(new Firework())    }}function Spark(x, y, color) {    this.x = x    this.y = y    this.dir = Math.random() * (Math.PI * 2)    this.dead = false    this.color = color    this.speed = Math.random() * 3 + 3;    this.walker = new Walker({        radius: 20,        speed: 0.25    })    this.gravity = 0.25    this.dur = this.speed / 0.1    this.move = function () {        this.dur--            if (this.dur < 0) this.dead = true        if (this.speed < 0) return        if (this.speed > 0) this.speed -= 0.1        var walk = this.walker.step()        this.x += Math.cos(this.dir + walk) * this.speed        this.y += Math.sin(this.dir + walk) * this.speed        this.y += this.gravity        this.gravity += 0.05    }    this.draw = function () {        drawCircle(this.x, this.y, 3, this.color)    }}function Firework(x, y) {    this.xmove = new Walker({        radius: 10,        speed: 0.5    })    this.x = x || Math.random() * ctx.canvas.width    this.y = y || ctx.canvas.height    this.height = Math.random() * ctx.canvas.height / 2    this.dead = false    this.color = randomColor()    this.move = function () {        this.x += this.xmove.step()        if (this.y > this.height) this.y -= 1;        else this.burst()    }    this.draw = function () {        drawCircle(this.x, this.y, 1, this.color)    }    this.burst = function () {        this.dead = true        var i = 100;        while (i--) sparks.push(new Spark(this.x, this.y, this.color))    }}function drawCircle(x, y, radius, color) {    color = color || &#39;#FFF&#39;    ctx.fillStyle = color    ctx.fillRect(x - radius / 2, y - radius / 2, radius, radius)}function randomColor() {    return [&#39;#6ae5ab&#39;, &#39;#88e3b2&#39;, &#39;#36b89b&#39;, &#39;#7bd7ec&#39;, &#39;#66cbe1&#39;][Math.floor(Math.random() * 5)];}function Walker(options) {    this.step = function () {        this.direction = Math.sign(this.target) * this.speed        this.value += this.direction        this.target ?            this.target -= this.direction :            (this.value) ?            (this.wander) ?            this.target = this.newTarget() :            this.target = -this.value :            this.target = this.newTarget()        return this.direction    }    this.newTarget = function () {        return Math.round(Math.random() * (this.radius * 2) - this.radius)    }    this.start = 0    this.value = 0    this.radius = options.radius    this.target = this.newTarget()    this.direction = Math.sign(this.target)    this.wander = options.wander    this.speed = options.speed || 1}

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

async/await in JS

How to make red fireworks with black background in canvas

The above is the detailed content of How to make cyan fireworks with black background in canvas. For more information, please follow other related articles on the PHP Chinese website!