h5实现打火机效果

要实现H5打火机效果，可以使用HTML5的Canvas元素和JavaScript来实现。以下是一个简单的示例代码：

HTML部分：

<canvas id="fireCanvas" width="400" height="300"></canvas>

CSS部分：

#fireCanvas {
    background-color: black;
}

JavaScript部分：

var canvas = document.getElementById("fireCanvas");
var ctx = canvas.getContext("2d");

var fireWidth = canvas.width;
var fireHeight = canvas.height;

var firePixels = [];
var fireColorsPalette = [
    [0, 0, 0],
    [7, 7, 7],
    [31, 7, 7],
    [47, 15, 7],
    [71, 15, 7],
    [87, 23, 7],
    [103, 31, 7],
    [119, 31, 7],
    [143, 39, 7],
    [159, 47, 7],
    [175, 63, 7],
    [191, 71, 7],
    [199, 71, 7],
    [223, 79, 7],
    [223, 87, 7],
    [223, 87, 7],
    [215, 95, 7],
    [215, 95, 7],
    [215, 103, 15],
    [207, 111, 15],
    [207, 119, 15],
    [207, 127, 15],
    [207, 135, 23],
    [199, 135, 23],
    [199, 143, 23],
    [199, 151, 31],
    [191, 159, 31],
    [191, 159, 31],
    [191, 167, 39],
    [191, 167, 39],
    [191, 175, 47],
    [183, 175, 47],
    [183, 183, 47],
    [183, 183, 55],
    [207, 207, 111],
    [223, 223, 159],
    [239, 239, 199],
    [255, 255, 255]
];

function startFire() {
    createFireDataStructure();
    createFireSource();
    setInterval(updateFire, 50);
}

function createFireDataStructure() {
    var numberOfPixels = fireWidth * fireHeight;
    for (var i = 0; i < numberOfPixels; i++) {
        firePixels[i] = 0;
    }
}

function createFireSource() {
    for (var column = 0; column < fireWidth; column++) {
        var overflowPixelIndex = fireWidth * fireHeight;
        var pixelIndex = (overflowPixelIndex - fireWidth) + column;

        firePixels[pixelIndex] = 36;
    }
}

function updateFire() {
    for (var column = 0; column < fireWidth; column++) {
        for (var row = 0; row < fireHeight; row++) {
            var pixelIndex = column + (fireWidth * row);
            updateFireIntensityPerPixel(pixelIndex);
        }
    }
    renderFire();
}

function updateFireIntensityPerPixel(currentPixelIndex) {
    var belowPixelIndex = currentPixelIndex + fireWidth;

    if (belowPixelIndex >= fireWidth * fireHeight) {
        return;
    }

    var decay = Math.floor(Math.random() * 3);
    var belowPixelFireIntensity = firePixels[belowPixelIndex];
    var newFireIntensity = belowPixelFireIntensity - decay >= 0 ? belowPixelFireIntensity - decay : 0;

    firePixels[currentPixelIndex - decay] = newFireIntensity;
}

function renderFire() {
    for (var column = 0; column < fireWidth; column++) {
        for (var row = 0; row < fireHeight; row++) {
            var pixelIndex = column + (fireWidth * row);
            var fireIntensity = firePixels[pixelIndex];

            var color = fireColorsPalette[fireIntensity];
            var colorString = "rgb(" + color[0] + "," + color[1] + "," + color[2] + ")";

            ctx.fillStyle = colorString;
            ctx.fillRect(column, row, 1, 1);
        }
    }
}

startFire();

以上代码中，我们首先创建了一个Canvas元素，然后使用Canvas的getContext方法获取到2D绘图上下文。接下来定义了一些变量，包括火焰的宽度、高度、像素数据和颜色调色板。

startFire函数用于启动火焰效果，首先创建了火焰的数据结构，然后创建火焰源，并使用setInterval定时更新火焰效果。

createFireDataStructure函数用于创建火焰的像素数据结构，通过firePixels数组存储每个像素的火焰强度。

createFireSource函数用于创建火焰源，将最底层的像素设置为最大火焰强度。

updateFire函数用于更新火焰的像素数据，首先遍历每个像素，然后根据下方像素的火焰强度和随机的衰减值计算新的火焰强度。

updateFireIntensityPerPixel函数用于计算每个像素的新火焰强度。

renderFire函数用于渲染火焰效果，遍历每个像素，根据火焰强度选择对应的颜色，并使用fillRect方法绘制每个像素点。

最后调用startFire函数来启动火焰效果。

通过以上代码，你可以在Canvas上看到一个简单的打火机效果。你可以根据自己的需求调整Canvas的宽高、火焰颜色和强度等参数来实现不同的效果