js实现canvas火焰动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：js实现canvas火焰动画效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
<style>
    html, body {
  margin: 0;
  padding: 0;
}
</style>
</head>

<body>

  <canvas id="gc">You have the worst browser ever! No support for canvas!!!!!</canvas>

  

    <script >
    function GameCanvas(canvas) {
    this.canvas = canvas;
    this.c = document.getElementById(this.canvas);
    this.ctx = this.c.getContext('2d');
    var top = this;
    this.tick = 0;

    this.mouse = {
        x: 0,
        y: 0,
        click: false
    };
    this.lockScroll = false;

    this.pictures = [1000];
    this.keys = [1000];
    this.width = document.getElementById(this.canvas).width;
    this.height = document.getElementById(this.canvas).height;

    this.lastLoop = new Date();
    this.fps = 0;
    this.slowFPS = 0;
    var time;
    this.fpsScaler = 1;
    
    this.textModeValue = "";

    document.addEventListener("keydown", function(e) {
        top.keys[e.keyCode] = true;
    });

    document.addEventListener("keyup", function(e) {
        top.keys[e.keyCode] = false;
    });

    document.addEventListener("touchstart", function(e) {
        top.mouse.x = e.touches[0].pageX;
        top.mouse.y = e.touches[0].pageY;
        top.mouse.click = true;
    });

    document.addEventListener("touchmove", function(e) {
        top.mouse.x = e.touches[0].pageX - top.c.getBoundingClientRect().left;
        top.mouse.y = e.touches[0].pageY - top.c.getBoundingClientRect().top;
    });

    document.addEventListener("touchend", function(e) {
        top.mouse.click = false;
    });

    document.ontouchmove = function(event) {
        if (top.lockScroll) {
            event.preventDefault();
        }
    }

    this.updateFPS = function() {
        var thisLoop = new Date;
        top.fps = 1000 / (thisLoop - top.lastLoop);
        if (top.tick % 10 == 0)
            top.slowFPS = top.fps;
        top.lastLoop = thisLoop;

        top.tick++;

        var now = new Date().getTime();
        top.fpsScaler = now - (time || now);

        time = now;

        top.fpsScaler /= 15;
    }

    this.c.addEventListener("mousemove", function(e) {
        top.mouse.x = e.clientX - top.c.getBoundingClientRect().left;
        top.mouse.y = e.clientY - top.c.getBoundingClientRect().top;
    });
    this.c.addEventListener("mousedown", function(e) {
        top.mouse.click = true;
    });
    this.c.addEventListener("mouseup", function(e) {
        top.mouse.click = false;
    });

    this.gradient = function(x, y, x2, y2, colors) {
        var a = 1 / (colors.length - 1);
        var b = 0;
        var grd = top.ctx.createLinearGradient(x, y, x2, y2);
        for (var i = 0; i < colors.length; ++i) {
            grd.addColorStop(b, colors[i]);
            b += a;
        }
        return grd;
    }

    this.map = function(x, in_min, in_max, out_min, out_max) {
        return (x - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
    }

    this.setsize = function(width, height) {
        document.getElementById(this.canvas).height = height;
        document.getElementById(this.canvas).width = width;
        this.width = document.getElementById(this.canvas).width;
        this.height = document.getElementById(this.canvas).height;
    }
    this.setSize = function(width, height) {
        document.getElementById(this.canvas).height = height;
        document.getElementById(this.canvas).width = width;
        this.width = document.getElementById(this.canvas).width;
        this.height = document.getElementById(this.canvas).height;
    }

    this.hideScrollBar = function() {
        document.body.style.overflow = 'hidden';
    }
    this.showScrollBar = function() {
        document.body.style.overflow = 'visible';
    }

    this.background = function(color) {
        top.rect(0, 0, this.width, this.height, color);
    }

    this.newButton = function(x, y, width, height, backColor, strokeColor, strokeWidth, text, click) {
        if (top.mouse.x > x && top.mouse.x < x + width && top.mouse.y > y && top.mouse.y < y + height && top.mouse.click) {
            click();
            top.ctx.beginPath();
            top.ctx.fillStyle = strokeColor;
            top.ctx.strokeStyle = backColor;
            top.ctx.lineWidth = strokeWidth;
            top.ctx.fillRect(x, y, width, height);
            top.ctx.strokeRect(x, y, width, height);
            top.ctx.textAlign = "center";
            top.text(x + width / 2, y + height / 2, 20, text, "black");
            top.ctx.textAlign = "left";
        } else {
            top.ctx.beginPath();
            top.ctx.fillStyle = backColor;
            top.ctx.strokeStyle = strokeColor;
            top.ctx.lineWidth = strokeWidth;
            top.ctx.fillRect(x, y, width, height);
            top.ctx.strokeRect(x, y, width, height);
            top.ctx.textAlign = "center";
            top.text(x + width / 2, y + height / 2, 20, text, "black");
            top.ctx.textAlign = "left";
        }
    }

    this.setCookie = function(cname, cva.........完整代码请登录后点击上方下载按钮下载查看