HTML5 Canvas Javascript使我的網頁鏈接無響應

Question

我有一個html5畫布動畫。 當它運行時，會使我的頁面無響應，或者導航頁面的鏈接無響應。 沒有代碼直接這樣做。 我認為這是因為javascript會大大降低瀏覽器的速度。 無論如何，這是代碼的jsfiddle

http://jsfiddle.net/#&togetherjs=psm0e5RNeI

當我刪除包含主javascript文件（小提琴一個）時，鏈接可以正常工作。 如果我在代碼中注釋掉setInterval計時器，則網頁將保持無響應。 如果我注釋掉對draw函數下的cloud and light函數的調用，該函數是根據其他2個庫繪制元素的，則該網頁仍然沒有響應。

有人可以幫我弄清楚為什么會這樣嗎？

謝謝！

我還想補充一下，Web控制台中也沒有錯誤。

在這里，我還決定添加javascript：

var canvas = document.getElementById('canvas'),
context=canvas.getContext('2d');


var fullC = Math.PI * 2; // Ending circle angle


var cW = canvas.width; // canvas width

var cH = canvas.height; // canvas height


var sizeInc = 0;


var globCount = 0; // how many times start is called


// cloud vars //

var radius = 90; // radious for clouds


var clX = radius / 2;

var clY = radius / 2;


var centreX = context.canvas.width / 2;

var centreY = context.canvas.height / 2;


var colour = {r:255, g:255, b:254};


var alpha = 0.2;


var circles = 20; // number of circles in the cloud 


// rain vars //

var rain = [];

var rainC = 55;


/// Rain objects ///

rain[0] = {

radius:2.5,
col:'red',
speed: getRandomInt(5,20),
ry:0,
rx:getRandomInt(0,canvas.width + 1000)


};


for(var i = 1; i <= rainC; i++){

rain[i] = {

    radius:2.5,
    col:'red',
    speed: getRandomInt(5,20),
    ry:0,
    rx:getRandomInt(0,canvas.width + 1000)


};

}


/// Lightning ///


var lt = new lightning({glow: false});

var drawL = false;


/// Starts the Animation ///

function start(){

globCount ++;

clearIt();
setBack();
draw();

}


/// Draw calls all the components of the animation ///

function draw(){

 clouds();
 rainIt();
 light();

}



/// Lightning Function ///

function light(){

var modResult = globCount % 50;

var modResult1 = globCount % 10;

if(modResult === 0){

    drawL = true;
}
if(modResult1 === 0){

    lt.hide();

}

if(drawL === true){

    lt.hide();
    lt.show(getRandomInt(100,canvas.width - 25),800, getRandomInt(100,canvas.width), canvas.height);
    drawL = false;
}


}


/// Draws the clouds ///

function clouds(){

/// Draws a concentrated cluster and a sparse cluster ///
for(var i = 0; i <= 14; i++){

    $cloudgen.drawCloud(context, clX + (i * radius) - 10, clY, radius + 20, colour, alpha, circles);

    $cloudgen.drawCloud(context, clX + (i * radius) - 10, clY, radius, colour, 0.15, circles);

}

}



/// Rain function ///

function rainIt(){

/// Draws all the rain ///
rain.forEach(function(rain){

    context.beginPath();
    context.fillStyle = 'rgba(102,217,239,.5)';
    context.arc(rain.rx,rain.ry,rain.radius,0,fullC);
    context.closePath();
    context.fill();

    /// Resets rains x y points ///
    if(rain.ry > canvas.height || rain.ry < 0){

        rain.ry = 0;
        rain.rx = getRandomInt(0,canvas.width);

    }

    if(rain.rx > canvas.width || rain.rx < 0){

        rain.ry = 0;
        rain.rx = getRandomInt(0,canvas.width);

    }

    rain.rx = rain.rx + getRandomInt(1,12);

    rain.ry = rain.ry + rain.speed;

});


}


/// Sets the background ///

function setBack(){

context.fillStyle = 'rgba(61,131,227,0.5)';
context.fillRect(0,0,cW,cH);


}


/// Clears Canvas ///

function clearIt(){

context.clearRect(0,0,canvas.width,canvas.height);


}


/// Random number maker ///

function getRandomInt (min, max) {

return Math.floor(Math.random() * (max - min + 1)) + min;

}


setInterval(start,100);

Answer 1

您使用一些簡化代碼，它創建了覆蓋所有其他元素的畫布。 因此，它會阻止鼠標輸入中的其他元素。 這是我在chrome調試工具中看到的內容：

<canvas width="1024px" height="888px" id="lightning_canvas" style="position: absolute; top: 0px; left: 0px;"></canvas>