HTML5 Canvas realistic smoke effect js plug-in

Brief Tutorial

smoke.js is a realistic smoke effects js plug-in based on HTML5 Canvas. Through this js plug-in, you can easily create various smoke effects on the page.

Usage method

Introduce the smoke.js file into the page.

<script type="text/javascript" src="js/smoke.js"></script>

HTML structure

Use a 5ba626b379994d53f7acf72a64f9b697 element as a container.

<canvas id="canvas"></canvas>

Initialize the plug-in

Use the following method at the bottom of the page to initialize the smoke effect plug-in.

var canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d')
canvas.width = 1000
canvas.height = 1000
 
var party = smokemachine(ctx, [54, 16.8, 18.2])
 
party.start() // start animating
 
party.addsmoke(500,500,10) // wow we made smoke
 
setTimeout(function(){
 
    party.stop() // stop animating
 
    party.addsmoke(600,500,100)
    party.addsmoke(500,600,20)
 
    for(var i=0;i<10;i++){
        party.step(10) // pretend 10 ms pass and rerender
    }
 
    setTimeout(function(){
        party.start()
    },1000)
 
},1000)

API

The APIs available for this smoke effect plug-in are:

• ##smokemachine(context, [r,g,b]): Returns a Smoke instance.

  
  

• #context - The canvas on which smoke is drawn.

• [r,g,b] - (optional) The color of the smoke

var party = smokemachine(context, [1,5,253])

• party.start (): Start smoke animation.

• party.stop(): End the smoke animation.

• party.addsmoke(x,y,numberofparticles):

• x,y — The coordinates of the smoke created in the canvas.

• numberofparticles — Creates more smoke.

• party.step(milliseconds): How many milliseconds after which the smoke will be redrawn.

The above is the content of the HTML5 Canvas realistic smoke effect js plug-in. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!