Javascript 为什么html5画布动画如此密集？

我使用画布创建这个动画，并将svg转换为画布形状。大多数时候，它运行它加热我的电脑和风扇开始运行

只是想知道代码、html5画布、画布路径或动画递归是否有如此密集的内容

代码笔上的视图：

//正在运行检查程序
log（'bg动画正在运行…'）；
//设置画布
var canvas=document.getElementById（'bgCanvas'）；
var ctx=canvas.getContext（'2d'）
//重做此操作-画布大小
//
变量宽度=window.innerWidth，
高度=窗内高度；
canvas.width=宽度*2；
canvas.height=高度*2；
var gridSquareWidth=20；
变量gridWidth=（宽度*2）/gridSquareWidth，
gridHeight=（高度*2）/gridSquareWidth；
var网格=[]；
//创建默认网格阵列
对于（var x=0；x（网格宽度/2）| | y<（网格高度/4）| | y>（网格高度/2））{
兰德--；
}
如果（rand>2）网格[x][y]=1；
}
}
//
//主更新功能
//
var animationSpeed=0.1；
var animationSpeedCount=0；
var running=true；
功能更新（dt）{
如果（正在运行）{
animationSpeedCount+=dt；
if（animationSpeedCount>animationSpeed）{
moveGrid（）；
animationSpeedCount=0；
}
draw（）；
}
}
var noOfFrames=3；
var waveOffset=15；
var增量=0；
函数moveGrid（）{
var x=增量；
var x2=增量-无框架-波偏移；
//添加frmae波
for（var i=0；i0&&x0）{
如果（添加）{
网格[x][y]=网格[x][y]+1；
}否则{
如果（网格[x][y]>1）网格[x][y]=网格[x][y]-1；
}
}
}
}
}
//增量列
增量+=1；
如果（增量>网格宽度）{
增量=0；
//别跑了
//运行=错误；
}
}
var填充=[“#eeeeee”、“#efefef”、“#fefefe”、“#ffffff”]；
函数绘图（）{
//将画布清除为白色
ctx.fillStyle='#dddddd'；
ctx.fillRect（0，0，canvas.width，canvas.height）；
对于（var x=0；x    // check program is being run

console.log('bg animation running...');


// setup canvas
var canvas = document.getElementById('bgCanvas');
var ctx = canvas.getContext('2d')

// redo this - canvas size
//
var width = window.innerWidth,
    height = window.innerHeight;

canvas.width = width * 2;
canvas.height = height * 2;

var gridSquareWidth = 20;
var gridWidth = (width * 2) / gridSquareWidth,
    gridHeight = (height * 2) / gridSquareWidth;



var grid = [];

// create default grid array
for (var x = 0; x < gridWidth; x++) {
    grid[x] = [];

    for (var y = 0; y < gridHeight; y++) {
        var rand  = getRandomArbitrary(0,5);
        var rand2  = getRandomArbitrary(0,2);

        if(rand2 == 1 || x < (gridWidth / 4) || x > (gridWidth / 2) || y < (gridHeight / 4) || y > (gridHeight / 2)){
            rand--;
        }

        if(rand > 2) grid[x][y] = 1;
    }
}


//
// main update function
//
var animationSpeed = 0.1;
var animationSpeedCount = 0;
var running = true;
function update(dt) {

    if(running){
        animationSpeedCount += dt;
        if(animationSpeedCount > animationSpeed){

            moveGrid();
            animationSpeedCount = 0;
        }

        draw();
    }
}

var noOfFrames = 3;
var waveOffset = 15;
var increment = 0;
function moveGrid() {

    var x = increment;
    var x2 = increment - noOfFrames - waveOffset;

    // add frmae wave
    for (var i = 0; i < noOfFrames; i++) {
        moveONeFrameForward(x, true);
        x--;
    }
    // go back frmae wave
    for (var i = 0; i < noOfFrames; i++) {
        moveONeFrameForward(x2, false);
        x2--;
    }

    // var x column, add of subtract by 1
    function moveONeFrameForward(x, add){

        if(x < 0){
            x = Math.ceil(gridWidth + x);
        }

        if(x > 0 && x < gridWidth){

            for (var y = 0; y < gridHeight; y++) {
                if(grid[x][y] > 0){
                    if(add){
                        grid[x][y] = grid[x][y] + 1;
                    }else{
                        if(grid[x][y] > 1) grid[x][y] = grid[x][y] - 1;
                    }
                }
            }
        }
    }

    // increment column
    increment += 1;
    if(increment > gridWidth){
        increment = 0;

        // stop running
        // running = false;
    }
}

var fills = ["#eeeeee","#efefef","#fefefe","#ffffff"];

function draw() {
    // clear canvas to white
    ctx.fillStyle = '#dddddd';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    for (var x = 0; x < gridWidth; x++) {
        for (var y = 0; y < gridHeight; y++) {

            var offsetX = x * gridSquareWidth;
            var offsetY = y * gridSquareWidth;
            var frame = 0;

            switch (grid[x][y]) {
                case 1:
                    frame = 1
                    break;
                case 2:
                    frame = 2;
                    break;
                case 3:
                    frame = 3;
                    break;
                case 4:
                    frame = 4;
                    break;
                default:
            }
            if(frame) drawframe(ctx, frame, offsetX, offsetY, fills);
        }
    }
}


// The main game loop
var lastTime = 0;
function gameLoop() {
    var now = Date.now();
    var dt = (now - lastTime) / 1000.0;

    update(dt);

    lastTime = now;
    window.requestAnimationFrame(gameLoop);
};

// start game
gameLoop();


//
// UTILITIES
//

// cross browser requestAnimationFrame - https://gist.github.com/mrdoob/838785
if ( !window.requestAnimationFrame ) {

    window.requestAnimationFrame = ( function() {

        return window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(
            /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
            window.setTimeout( callback, 1000 / 60 );
        };

    })();
}

function getRandomArbitrary(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
}


var frame1Center = 4.1;
var frame2Center = 2.1;
function drawframe(ctx, frame, x, y, fills) {

    ctx.strokeStyle = 'rgba(0,0,0,0)';
    ctx.lineCap = 'butt';
    ctx.lineJoin = 'miter';
    ctx.miterLimit = 4;
    ctx.fillStyle = fills[frame-1];

    switch (frame) {
        case 1:
            ctx.beginPath();
            ctx.moveTo(3.1+x+frame1Center,0+y);
            ctx.lineTo(0.6+x+frame1Center,0+y);
            ctx.bezierCurveTo(0.3+x+frame1Center,0+y,0+x+frame1Center,0.3+y,0+x+frame1Center,0.6+y);
            ctx.lineTo(0.3+x+frame1Center,12.1+y);
            ctx.bezierCurveTo(0.3+x+frame1Center,12.4+y,0.6+x+frame1Center,12.7+y,0.8999999999999999+x+frame1Center,12.7+y);
            ctx.lineTo(3.4+x+frame1Center,12.7+y);
            ctx.bezierCurveTo(3.6999999999999997+x+frame1Center,12.7+y,4+x+frame1Center,12.399999999999999+y,4+x+frame1Center,12.1+y);
            ctx.lineTo(4+x+frame1Center,0.6+y);
            ctx.bezierCurveTo(4.1+x+frame1Center,0.3+y,3.7+x+frame1Center,0+y,3.1+x+frame1Center,0+y);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            break;
        case 2 || 6:
            ctx.beginPath();
            ctx.moveTo(4.4+x+frame2Center,0+y);
            ctx.bezierCurveTo(3.1+x+frame2Center,0+y,0+x+frame2Center,0.8+y,0+x+frame2Center,2.1+y);
            ctx.bezierCurveTo(0+x+frame2Center,3.4000000000000004+y,0.3+x+frame2Center,12.5+y,1.6+x+frame2Center,12.799999999999999+y);
            ctx.bezierCurveTo(2.8+x+frame2Center,13+y,6+x+frame2Center,12+y,6+x+frame2Center,10.7+y);
            ctx.bezierCurveTo(6+x+frame2Center,9.1+y,5.7+x+frame2Center,0+y,4.4+x+frame2Center,0+y);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            break;
        case 3 || 5:
            ctx.beginPath();
            ctx.moveTo(5.2+x,0 +y);
            ctx.bezierCurveTo(7.5 +x,0+y,9.3+x,6.5+y,9.3 +x,8.7+y);
            ctx.bezierCurveTo(9.3+x,10.899999999999999+y,6.300000000000001+x,12.799999999999999+y,4.1000000000000005+x,12.799999999999999+y);
            ctx.bezierCurveTo(1.9000000000000004+x,12.799999999999999+y,0+x,6.3+y,0+x,4.1+y);
            ctx.bezierCurveTo(0+x,1.8999999999999995+y,3+x,0+y,5.2+x,0+y);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            break;
        case 4:
            ctx.beginPath();
            ctx.arc(5.9+x,6.3+y,5.8,0,6.283185307179586,true);
            ctx.closePath();
            ctx.fill();
            ctx.stroke();
            break;
        default:
    }
};