Comment faire des feux d'artifice cyan avec fond noir sur toile

Cette fois je vais vous montrer comment réaliser un feu d'artifice cyan avec fond noir à l'aide de toile. Quelles sont les précautions pour réaliser un feu d'artifice cyan à fond noir à l'aide de toile. Voici un cas pratique, jetons un oeil. .

html

<canvas></canvas><h1 id="span-span">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}

Je crois que vous avez lu le cas dans cet article Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

async/await en JS

Comment faire des feux d'artifice rouges sur fond noir en toile

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!