Maison > interface Web > js tutoriel > le corps du texte

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

php中世界最好的语言
Libérer: 2018-03-13 16:07:43
original
2423 Les gens l'ont consulté

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. .

Comment faire des feux dartifice cyan avec fond noir sur toile

html

<canvas></canvas><h1>201<span>8</span></h1>
Copier après la connexion

css

html,body {    padding: 0px;    margin: 0px;    background: #222;    font-family: &#39;Karla&#39;, 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);
    }
}
Copier après la connexion

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}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!