HTML5 fire effect tutorial. New interesting HTML5 tutorial – I will tell you how you can create nice attractive html5 canvas fireplace. Main idea – to draw a live fire at canvas.
Here are our demo and downloadable package:
Live Demo
[sociallocker]
download in package
[/sociallocker]
Ok, download the source files and lets start coding !
Step 1. HTML
Here are html code of our fireplace page
index.html
01 | <!DOCTYPE html> |
02 | <html lang="en" > |
03 | <head> |
04 | <meta charset="utf-8" /> |
05 | <title>HTML5 fire effect | Script Tutorials</title> |
06 | <link href="css/main.css" rel="stylesheet" type="text/css" /> |
07 | <script type="text/javascript" src="js/script.js"></script> |
08 | </head> |
09 | <body> |
10 | <div class="container"> |
11 | <canvas id="panel" width="370" height="175"></canvas> |
12 | </div> |
13 | <footer> |
14 | <h2>HTML5 fire effect</h2> |
15 | <a href="https://www.script-tutorials.com/html5-fire-effect/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> |
16 | </footer> |
17 | </body> |
18 | </html> |
Step 2. CSS
Here are used CSS styles
css/main.css
01 | *{ |
02 | margin:0; |
03 | padding:0; |
04 | } |
05 | body { |
06 | background-color:#bababa; |
07 | color:#fff; |
08 | font:14px/1.3 Arial,sans-serif; |
09 | background-image: url(../images/bg.jpg); |
10 | } |
11 | footer { |
12 | background-color:#212121; |
13 | bottom:0; |
14 | box-shadow: 0 -1px 2px #111111; |
15 | display:block; |
16 | height:70px; |
17 | left:0; |
18 | position:fixed; |
19 | width:100%; |
20 | z-index:100; |
21 | } |
22 | footer h2{ |
23 | font-size:22px; |
24 | font-weight:normal; |
25 | left:50%; |
26 | margin-left:-400px; |
27 | padding:22px 0; |
28 | position:absolute; |
29 | width:540px; |
30 | } |
31 | footer a.stuts,a.stuts:visited{ |
32 | border:none; |
33 | text-decoration:none; |
34 | color:#fcfcfc; |
35 | font-size:14px; |
36 | left:50%; |
37 | line-height:31px; |
38 | margin:23px 0 0 110px; |
39 | position:absolute; |
40 | top:0; |
41 | } |
42 | footer .stuts span { |
43 | font-size:22px; |
44 | font-weight:bold; |
45 | margin-left:5px; |
46 | } |
47 | .container { |
48 | background-image: url(../images/fireplace.png); |
49 | bottom:70px; |
50 | color:#000; |
51 | height:482px; |
52 | left: 200px; |
53 | position:fixed; |
54 | width:860px; |
55 | } |
56 | .container #panel { |
57 | margin-left: 235px; |
58 | margin-top: 75px; |
59 | } |
Step 3. JS
js/script.js
01 | // variables |
02 | var canvas, ctx; |
03 | var data_width; |
04 | var data_height; |
05 | var colors = []; |
06 | var out_data = []; |
07 | // new filled array function |
08 | function new_filled_array(len, val) { |
09 | var rv = new Array(len); |
10 | while (--len >= 0) { |
11 | rv[len] = val; |
12 | } |
13 | return rv; |
14 | } |
15 | // prepare palette function |
16 | function prepare_palette() { |
17 | for (var i = 0; i < 64; ++i) { |
18 | colors[i + 0] = {r: 0, g: 0, b: i << 1, a: i}; |
19 | colors[i + 64] = {r: i << 3, g: 0, b: 128 - (i << 2), a: i+64}; |
20 | colors[i + 128] = {r: 255, g: i << 1, b: 0, a: i+128}; |
21 | colors[i + 192] = {r: 255, g: 255, b: i << 2, a: i+192}; |
22 | } |
23 | } |
24 | // drawing functions |
25 | function clear() { // clear canvas function |
26 | ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); |
27 | } |
28 | function drawScene() { // main drawScene function |
29 | clear(); // clear canvas |
30 | var data_cnt = data_width * (data_height - 1); |
31 | for (var i = 0; i < data_width; i++) { |
32 | out_data[data_cnt + i] = (0.7 > Math.random()) ? 255 : 0; |
33 | } |
34 | for (var y = 0; y < 175; y++){ |
35 | for (var x = 0; x < data_width; x++){ |
36 | var s = data_cnt + x; |
37 | var temp_data = out_data[s] + out_data[s + 1] + out_data[s - 1] + out_data[s - data_width]; |
38 | temp_data >>= 2; |
39 | if (temp_data > 1){ |
40 | temp_data -= 1; |
41 | } |
42 | temp_data <<= 0; |
43 | out_data[s - data_width] = temp_data; |
44 | var id = s << 2; |
45 | img_data.data[id + 0] = colors[temp_data].r; // red |
46 | img_data.data[id + 1] = colors[temp_data].g; // green |
47 | img_data.data[id + 2] = colors[temp_data].b; // blue |
48 | img_data.data[id + 3] = colors[temp_data].a; // alpha |
49 | } |
50 | data_cnt -= data_width; |
51 | } |
52 | // draw result data |
53 | ctx.putImageData(img_data, 0, 0); |
54 | } |
55 | if (window.attachEvent) { |
56 | window.attachEvent('onload', main_init); |
57 | } else { |
58 | if(window.onload) { |
59 | var curronload = window.onload; |
60 | var newonload = function() { |
61 | curronload(); |
62 | main_init(); |
63 | }; |
64 | window.onload = newonload; |
65 | } else { |
66 | window.onload = main_init; |
67 | } |
68 | } |
69 | function main_init() { |
70 | // creating canvas and context objects |
71 | canvas = document.getElementById('panel'); |
72 | ctx = canvas.getContext('2d'); |
73 | // preparing initial image data (empty) |
74 | img_data = ctx.createImageData(canvas.width, canvas.height); |
75 | data_width = img_data.width, |
76 | data_height = img_data.height, |
77 | prepare_palette(); |
78 | // allocating array with zeros |
79 | out_data = new_filled_array(data_width * data_height, 0) |
80 | setInterval(drawScene, 30); // loop drawScene |
81 | } |
Most of the code – pure mathematics. You are welcome to spend some time to understand all these processes. I have tried to comment this code as much as possible.
