Efecto de humo interactivo con JavaScript y Canvas-Smoke. js
| Autor: | bijection |
|---|---|
| Views Total: | 7,794 |
| Sitio oficial: | Ir a la web |
| Actualizado: | September 14, 2018 |
| Licencia: | MIT |
Vista prévia
Descripción
Smoke. js es una librería JavaScript elegante que permite renderizar animaciones de humo interactivas y realistas usando HTML5 Canvas y un poco de JavaScript.
Funcionamiento
Descargue y coloque el archivo de JavaScript Smoke. js en su página HTML donde sea necesario.
<script src="smoke.js"></script>
Cree un elemento canvas de HTML5 en el que desee aplicar la animación de humo.
<canvas id="canvas"></canvas>
Crear la animación de humo.
var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = innerWidth
canvas.height = innerHeight
// smokemachine(context, [r,g,b])
var demo = smokemachine(ctx, [54, 16.8, 18.2]) Inicie la animación.
demo.start()
Detenga la animación.
demo.stop()
Añadir una nueva animación de humo.
// addsmoke(x,y,numberofparticles) demo.addsmoke(...)
// redraw the smoke animaion after 2 seconds demo.step(2000)
Haga que la animación de humo reaccione al movimiento del ratón.
onmousemove = function (e) {
var x = e.clientX
var y = e.clientY
var n = .5
var t = Math.floor(Math.random() * 200) + 3800
party.addsmoke(x, y, n, t)
} Registro de cambios
09/14/2018
- Corrija el uso del nombre de variable global en function
