Демо JavaScript:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> <title>Fire</title> <style type="text/css"> body { background-color: #000000; margin: 0px; } canvas { width: 650px; height:650px; display: block; } </style> </head> <body> <canvas id='fire' width='650' height='650'></canvas> <script type="text/javascript"> // Параметры детализации var r = 8; var sh = Math.floor(650 / r); var v = Math.floor(650 / r); var s = sh * v; var context, image, data, a, b, d, c, y, calc = 0; creature(); // Отрисовка function drawing(x, y) { a[ Math.floor(x) + (Math.floor(y) * sh)] = 1000; } // Функция инициализации function creature() { var fire, canvas; // Метод document.getElementById() возвращает ссылку на элемент, который имеет атрибут id с указанным значением. var canvas = document.getElementById("fire"); // Параметры холста canvas.width = sh; canvas.height = v; // Метод getContext() возвращает контекст рисования на холсте context = canvas.getContext("2d"); context.fillStyle = "rgb(0, 0, 0)"; context.fillRect (0, 0, sh, v); // Метод getImageData() возвращает объект ImageData, который копирует пиксельные данные заданной прямоугольной области холста. image = context.getImageData(0, 0, sh, v); data = image.data; a = []; b = []; d = []; // Генерация for (var i = 0; i < s + sh; i ++) { a[i] = 0; b[i] = 0; d[i] = Math.random(); } } // Функция, которая будет вызвана, когда придёт время обновить вашу анимацию на следующей перерисовке. function enliven() { if (c) { for (var i = 0; i < y.length; i++) { drawing(y[i][0], y[i][1]); } } // Количество деталей var max = sh / 5; for (var i = 0; i < max; i ++) { drawing(Math.random() * sh, v); } var imultiply4, pel; // Палитра for (var i = sh; i < s; i ++) { imultiply4 = i * 4; pel = b[i] = ((a[i - 1] + a[i + 1]) * .235) + (a[i + sh] * d[(i + calc) % s]); data[ imultiply4 ] = Math.min( 255, pel << 3 ); data[ imultiply4 + 1 ] = Math.min( 255, pel ); data[ imultiply4 + 2 ] = Math.min( 255, pel >> 1 ); } // Метод slice() возвращает новый массив, содержащий копию части исходного массива. a = b.slice(0); // putImageData() рисует данные из заданного ImageData объекта на холст. context.putImageData(image, 0, 0); calc += Math.floor(Math.random() * s); // requestAnimationFrame указывает браузеру на то, что вы хотите произвести анимацию, и просит его запланировать перерисовку на следующем кадре анимации. requestAnimationFrame(enliven); } requestAnimationFrame(enliven); </script> </body> </html>
Прикрепленный файл | Размер |
---|---|
pylnik_flame.zip | 1.79 кб |