js实现canvas鼠标跟随火把照明动画效果代码-html代码-BFW代码库

js实现canvas鼠标跟随火把照明动画效果代码

代码语言：html

所属分类：动画

代码描述：js实现canvas鼠标跟随火把照明动画效果代码

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

<html>
<head>
    <meta charset="utf-8">

    <style>
@import url(https://fonts.googleapis.com/css?family=Amatic+SC);
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }
    </style>

</head>
<body>
    <canvas id="fire" height="703" width="902"></canvas>

    <script>
        var Fire = function() {

            this.canvas = document.getElementById('fire');
            this.ctx = this.canvas.getContext('2d');
            this.canvas.height = window.innerHeight;
            this.canvas.width = window.innerWidth;

            this.aFires = [];
            this.aSpark = [];
            this.aSpark2 = [];



            this.mouse = {
                x: this.canvas.width * .5,
                y: this.canvas.height * .75,
            }



            this.init();

        }
        Fire.prototype.init = function() {

            this.canvas.addEventListener('mousemove', this.updateMouse.bind(this), false);

        }
        Fire.prototype.run = function() {

            this.update();
            this.draw();

            if (this.bRuning)
                requestAnimationFrame(this.run.bind(this));

        }
        Fire.prototype.start = function() {

            this.bRuning = true;
            this.run();

        }
        Fire.prototype.stop = function() {

            this.bRuning = false;

        }
        Fire.prototype.update = function() {

            this.aFires.push(new Flame(this.mouse));
            this.aSpark.push(new Spark(this.mouse));
            this.aSpark2.push(new Spark(this.mouse));



            for (var i = this.aFires.length - 1; i >= 0; i--) {

                if (this.aFires[i].alive)
                    this.aFires[i].update();
                else
                    this.aFires.splice(i, 1);

            }

            for (var i = this.aSpark.length - 1; i >= 0; i--) {

                if (this.aSpark[i].alive)
                    this.aSpark[i].update();
                else
                    this.aSpark.splice(i, 1);

            }


            for (var i = this.aSpark2.length - 1; i >= 0; i--) {

                if (this.aSpark2[i].alive)
                    this.aSpark2[i].update();
                else
                    this.aSpark2.splice(i, 1);

            }

        }

        Fire.prototype.draw = function() {

            this.ctx.globalCompositeOperation = "source-over";
            this.ctx.fillStyle = "rgba( 15, 5, 2, 1 )";
            this.ctx.fillRect(0, 0, window.innerWidth, window.innerHeight);

            this.grd = this.ctx.createRadialGradient(this.mouse.x, this.mouse.y - 200, 200, this.mouse.x, this.mouse.y - 100, 0);
            this.grd.addColorStop(0, "rgb( 15, 5, 2 )");
            this.grd.addColorStop(1, "rgb( 30, 10, 2 )");
            this.ctx.beginPath();
            this.ctx.arc(this.mouse.x, this.mouse.y - 100, 200, 0, 2*Math.PI);
            this.ctx.fillStyle = this.grd;
            this.ctx.fill();


            this.ctx.font = "15em Amatic SC";
            this.ctx.textAlign = "center";
            this.ctx.strokeStyle = "rgb(50, 20, 0)";
            this.ctx.fillStyle = "rgb(120, 10, 0)";
            this.ctx.lineWidth = 2;
            this.ctx.strokeText("Fire", this.canvas.width/2, this.canvas.height * .72);
            this.ctx.fillText("Fire", this.canvas.width/2, this.canvas.height * .72);



            this.ctx.globalCompositeOperation = "overlay"; //or lighter or soft-light

            for (var i = this.aFires.length - 1; i >= 0; i--) {

                this.aFires[i].draw(this.ctx);

            }

            this.ctx.globalCompositeOperation = "soft-light"; //"soft-light";//"color-dodge";

            for (var i = this.aSpark.length - 1; i >= 0; i--) {

                if ((i % 2) === 0)
                    this.aSpark[i].draw(this.ctx);

            }


            this.ctx.globalCompositeOperation = "color-dodge"; //"soft-light";//"color-dodge";

            for (var i = this.aSpark2.length - 1; i >= 0; i--) {

                this.aSpark2[i].draw(this.ctx);

            }


        }

        Fire.prototype.updateMouse = function(e) {

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