js实现canvas熊熊燃烧的大火动画效果代码

代码语言:html

所属分类:动画

代码描述:js实现canvas熊熊燃烧的大火动画效果代码

代码标签: 熊熊燃烧 大火 动画 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<html lang="en">
<head>

    <meta charset="UTF-8">


    <style>
        body {
            background-color: #070707;
            overflow: hidden;
        }
        canvas {
            display: block;
            margin: 0 auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>



</head>

<body>
    <canvas id="frame" width="1280" height="288"></canvas>

    <script>
        var palette = [
            '#070707', '#1f0707', '#2f0f07', '#470f07',
            '#571707', '#671f07', '#771f07', '#8f2707',
            '#9f2f07', '#af3f07', '#bf4707', '#c74707',
            '#df4f07', '#df5707', '#df5707', '#d75f07',
            '#d7670f', '#cf6f0f', '#cf770f', '#cf7f0f',
            '#cf8717', '#c78717', '#c78f17', '#c7971f',
            '#bf9f1f', '#bf9f1f', '#bfa727', '#bfa727',
            '#bfaf2f', '#b7af2f', '#b7b72f', '#b7b737',
            '#cfcf6f', '#dfdf9f', '#efefc7', '#ffffff'];

        var global = {
            w: 0,
            h: 0
        };
        var scale = 4;
        var dots = [];

        function start() {
            global.w = Math.min(320, Math.round(window.innerWidth / scale));
            global.h = Math.min(240, Math.........完整代码请登录后点击上方下载按钮下载查看

网友评论0