Html5 Canvas Javascript使我的网页链接没有响应

Html5 Canvas Javascript making my webpage links unresponsive

本文关键字:链接 响应 网页 我的 Canvas Javascript Html5      更新时间:2024-05-27

我有一个html5画布动画。当它运行时,它会使我的页面没有响应,或者更确切地说,我导航页面的链接没有响应。没有代码直接执行此操作。我认为这是因为javascript让浏览器的速度慢了很多。无论如何,这里有一个jsfiddle的代码

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

当我删除include主javascript文件(fiddle中的那个)时,链接工作正常。如果我注释掉代码中的setInterval计时器,则网页将保持无响应状态。如果我注释掉draw函数下对cloud-and-light函数的调用,该函数是基于其他两个库绘制元素的,则网页仍然没有响应。

有人能帮我弄清楚为什么会发生这种事吗?

谢谢!

我还想补充一点,在网络控制台中也没有错误。

在这里,我还决定包含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);

您使用一些轻量级代码,它会创建覆盖所有其他元素的画布。因此它会阻止鼠标输入其他元素。以下是我在chrome调试工具中看到的内容:

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