canvas实现数字燃烧火焰交互动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：canvas实现数字燃烧火焰交互动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
/*
global
*/
*, *::before, *::after {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
}

*:focus {
    outline: none;
}

body {
    height: 100vh;
    overflow: hidden;
}

canvas {
    touch-action: none;
}
</style>

  
  
  
</head>

<body translate="no">
  <script>

    const imageSrc = 'data:image/png;base64,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';
;

</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script>
//---

'use strict';

//---

console.clear();

//---

let w = 0;
let h = 0;

let animationFrame = null;
let isTouchDevice = false;

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d', { willReadFrequently: false, alpha: false });

let imageData = null;
let data = null;

const center = { x: w / 2, y: h / 2 };

let pointerPos = { x: center.x, y: center.y };
let pointerPosSave = { x: pointerPos.x, y: pointerPos.y };
let pointerDownButton = -1;

//---

const FLAME_COLORS = [

255, 255, 255,
230, 230, 250,
255, 255, 0,
255, 215, 0,
255, 105, 180,
255, 99, 71,
72, 61, 139,
34, 34, 34,
26, 26, 26,
17, 17, 17];



let flameColorDepth = 39;
let flameColorTable = createGradient(FLAME_COLORS, flameColorDepth);
let flameColorTableLength = Math.round(flameColorTable.length / 3) - 1;

let gridWidth = 0;
let gridHeight = 0;

let windStrength = 0;
let windDirection = 0;

let pixelSize = 2;
let pixelSizeSquared = pixelSize * pixelSize;
let pixelHolderLength = 0;
let pixelHolder = null;
let pixelBufferHolder = null;
let pixelImageBufferHolder = null;
let pixelSpreadFrom = null;
let pixelSpreadFromLengthPreCalc = 0;

const RANDOM_TABLE_SIZE = 512; // Power of 2
const RANDOM_TABLE_MASK = RANDOM_TABLE_SIZE - 1;
const randomTable = new Float32Array(RANDOM_TABLE_SIZE);
let randomIndex = 0;

let gui = null;
let stats = null;

const ROCKET_PROPS = 4;
const ROCKET_COUNT_MIN = 3;
const ROCKET_COUNT_MAX = 25;
const ROCKETS_PER_PIXEL = 1 / 300;

let rocketCount = 0;
let rocketHolderLength = 0;
let rocketHolder = null;

const IMAGE_THRESHOLD = 1;
const IMAGE_MARGIN = 15;

//---

function init() {

  isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;

  //---

  if (isTouchDevice === true) {

    canvas.addEventListener('touchmove', cursorMoveHandler, false);
    canvas.addEventListener('touchstart', cursorEnterHandler, false);
    canvas.addEventListener('touchend', cursorLeaveHandler, false);
    canvas.addEventListener('touchcancel ', cursorLeaveHandler, false);

  } else {

    canvas.addEventListener('pointermove', cursorMoveHandler, false);
    canvas.addEventListener('pointerdown', cursorDownHandler, false);
    canvas.addEventListener('pointerup', cursorUpHandler, false);
    canvas.addEventListener('pointerenter', cursorEnterHandler, false);
    canvas.addEventListener('pointerleave', cursorLeaveHandler, false);

  }

  //---

  for (let i = 0; i < RANDOM_TABLE_SIZE; i++) {

    randomTable[i] = Math.random();

  }

  //---

  stats = new Stats();
  stats.domElement.style.position = 'absolute';

  document.body.appendChild(stats.domElement);

  //---

  document.body.appendChild(canvas);

  window.addEventListener('resize', onResize, false);

  restart(true);

}

function onResize(event) {

  restart();

}

function restart(explosion = false) {

  const innerWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  const innerHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

  //---

  w = innerWidth;
  h = innerHeight;

  //---

  canvas.width = w;
  canvas.height = h;

  imageD.........完整代码请登录后点击上方下载按钮下载查看