文章/答案/技术大牛

发布

社区首页 >问答首页 >当用户离开首页时，为什么我的HTML5 <CANVAS>动画不能在Joomla中正确显示

问当用户离开首页时，为什么我的HTML5 <CANVAS>动画不能在Joomla中正确显示
EN

Stack Overflow用户

提问于 2012-02-14 16:34:23

回答 2查看 1.1K关注 0票数 1

我构建了一个可爱的(!)在我的Joomla模板中，使用Javascript和HTML5标签，在不同的层上有7个透明的云，当它们在页面上移动时，它们都在彼此的顶部移动。站点名称也是的一部分，因此云可以在它的后面或前面，这取决于它们所在的图层。

你可以在那里亲眼看到：http://www.flunki.com

所有内容都能在首页上显示。但只要你点击链接(例如，左边的博客)动画停止了，我只有一个静态的云(有时是2个)在屏幕的左边。返回首页并不能解决这个问题，重新加载也不能解决这个问题。F5重新加载可以解决此问题。

对我来说，这与在某个地方缓存页面有关( Joomla中的缓存被关闭)，但我没有找到解决这个问题的方法。

有人能帮帮忙吗？

以下是模板中的代码：

<script type="text/javascript">
var canvas;
var ctx;
var max;
var logopos; 
var background;
var logo;
var width = 1300;
var height = 150;
var cloud1;
var cloud1_x;
var cloud1_y;
var cloud2;
var cloud2_x;
var cloud2_y;
var cloud3;
var cloud3_x;
var cloud3_y;
var cloud4;
var cloud4_x;
var cloud4_y;
var cloud5;
var cloud5_x;
var cloud5_y;
var cloud6;
var cloud6_x;
var cloud6_y;
var cloud7;
var cloud7_x;
var cloud7_y;
var cloud8;
var cloud8_x;
var cloud8_y;
var irun;

function init() {
    canvas = document.getElementById("clouds");
    width = window.innerWidth;
irun =+ 1;
    height = canvas.height;
    ctx = canvas.getContext("2d");

    // init background 
    background = new Image();
    background.src = 'http://www.flunki.com/templates/celebs_plazza/images/backblue.png';

// init logo 
    logo = new Image();
    logo.src = 'http://www.flunki.com/templates/celebs_plazza/images/logo.png';


    // init cloud1
    cloud1 = new Image();
    cloud1.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png';
    cloud1.onload = function(){
    cloud1_x = 60;
        cloud1_y = 5;
};

// init cloud3
    cloud3 = new Image();
    cloud3.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png';
    cloud3.onload = function(){
    cloud3_x = max/2;
        cloud3_y = 60;
};
// init cloud5
    cloud5 = new Image();
    cloud5.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png';
    cloud5.onload = function(){
    cloud5_x = max-180;
        cloud5_y = 35;
};
// init cloud7
    cloud7 = new Image();
    cloud7.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png';
    cloud7.onload = function(){
    cloud7_x = 200;
        cloud7_y = 75;
};

// init cloud2
    cloud2 = new Image();
    cloud2.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png';
    cloud2.onload = function(){
    cloud2_x = max-100;
        cloud2_y = 15;
};

// init cloud4
    cloud4 = new Image();
    cloud4.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png';
    cloud4.onload = function(){
    cloud4_x = max-300;
        cloud4_y = -15;
};

// init cloud6
    cloud6 = new Image();
    cloud6.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png';
    cloud6.onload = function(){
    cloud6_x = max-560;
        cloud6_y = 8;
};

// init cloud8
    cloud8 = new Image();
    cloud8.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png';
    cloud8.onload = function(){
    cloud8_x = 0;
        cloud8_y = 38;
};

return setInterval(main_loop, 10);
}

function update(){
max = window.innerWidth;
logopos = (640 + ((window.innerWidth-960)/2));
cloud1_x -= .05;
if (cloud1_x < -128) {
cloud1_x = max;
}
cloud3_x -= .2;
if (cloud3_x < -128) {
cloud3_x = max;
}
cloud5_x -= .15;
if (cloud5_x < -128) {
cloud5_x = max;
}
cloud7_x -= .1;
if (cloud7_x < -128) {
cloud7_x = max;
}
cloud2_x += .1;
if (cloud2_x>max ) {
cloud2_x  = -128;
}
cloud4_x += .05;
if (cloud4_x>max ) {
cloud4_x  = -128;
}
cloud6_x += .15;
if (cloud6_x>max ) {
cloud6_x  = -128;
}
cloud8_x += .2;
if (cloud8_x>max ) {
cloud8_x  = -128;
}
}

function draw() {
ctx.canvas.width  = window.innerWidth-20;
ctx.drawImage(background,0,0);

ctx.drawImage(cloud1, cloud1_x, cloud1_y);
ctx.drawImage(cloud2, cloud2_x, cloud2_y);
ctx.drawImage(cloud3, cloud3_x, cloud3_y);
ctx.drawImage(cloud4, cloud4_x, cloud4_y);
ctx.drawImage(cloud5, cloud5_x, cloud5_y);
ctx.drawImage(cloud6, cloud6_x, cloud6_y);
ctx.drawImage(logo,logopos,0);
ctx.drawImage(cloud7, cloud7_x, cloud7_y);
// ctx.drawImage(cloud8, cloud8_x, cloud8_y);

}

function main_loop() {
    draw();
    update();
}

init();



</script>

animation

canvas

joomla

html

回答 2

Stack Overflow用户

发布于 2012-02-14 23:08:16

1)在init()中，您正在使用在函数update()中定义的变量max，该变量在后面立即调用。您应该在init()函数之前或开始时定义max。我真的不知道为什么这样做有时甚至行得通。

2) max = window.innerWidth

window.innerWidth在解析<body>并在此之前触发脚本后可用-有时(当缓存被清除时)它有足够的时间加载所有必要的DOM内容并计算window.innerWidth

我知道您正在使用mootools，这样就可以避免将init()函数放在DOMReady事件中

window.addEvent('domready', function() {
    init();
});

3)没有人回答你，因为你的代码一团糟，了解一下：

Arrays
Loops (用于)

票数 1

Stack Overflow用户

发布于 2012-02-16 18:53:44

好了，我终于找到了问题所在。

首先，我从模板中删除了代码，并为其创建了一个模块，以便每当用户单击菜单项时页面更新时都会加载该模块。

这并没有解决这个问题。

然后，我回到了我用来开始动画的网站，并在我的模块中使用了他们的代码，它工作了一段时间，然后停止了。我仍然不知道为什么，但是我用一个简单的HTML5画布动画替换了代码，它在首页的任何地方都可以工作。那它必须是我的代码。

我回头看了一遍，发现每次更新图像时(当所有图形都已加载时)，我都会使用window.innerWidth重新绘制徽标。它确实在第一次加载页面时起作用，但不是像rezoner所指出的那样，这让我发现了DOMReady的所有微妙之处(谢谢你)。

下面的更新代码反映了这一点，并且工作起来很棒。

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>flunkibanner</title>
  </head>
<body>
  <section>
    <div>
        <canvas id="clouds" width="100%" >
         Your browser does not fully support HTML5.<BR>
Maybe it is time to upgrade ?

        </canvas>

    </div>

<script type="text/javascript">
var canvas;
var ctx;
var max;
var logopos; 
var background;
var logo;
var width = 1300;
var height = 150;
var cloud1;
var cloud1_x;
var cloud1_y;
var cloud2;
var cloud2_x;
var cloud2_y;
var cloud3;
var cloud3_x;
var cloud3_y;
var cloud4;
var cloud4_x;
var cloud4_y;
var cloud5;
var cloud5_x;
var cloud5_y;
var cloud6;
var cloud6_x;
var cloud6_y;
var cloud7;
var cloud7_x;
var cloud7_y;
var cloud8;
var cloud8_x;
var cloud8_y;

function init() {
    canvas = document.getElementById("clouds");
    width = window.innerWidth;
    max = window.innerWidth;
    height = canvas.height;
    ctx = canvas.getContext("2d");
    ctx.canvas.width  = window.innerWidth-20;

    // init background 
    background = new Image();
    background.src = 'http://www.flunki.com/templates/celebs_plazza/images/backblue.png';

// init logo 
    logo = new Image();
    logo.src = 'http://www.flunki.com/templates/celebs_plazza/images/logo.png';
    logopos = (640 + ((window.innerWidth-960)/2));

    // init cloud1
    cloud1 = new Image();
    cloud1.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png';
    cloud1.onload = function(){
    cloud1_x = 60;
        cloud1_y = 5;
};

// init cloud3
    cloud3 = new Image();
    cloud3.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png';
    cloud3.onload = function(){
    cloud3_x = max/2;
        cloud3_y = 60;
};
// init cloud5
    cloud5 = new Image();
    cloud5.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png';
    cloud5.onload = function(){
    cloud5_x = max-180;
        cloud5_y = 35;
};
// init cloud7
    cloud7 = new Image();
    cloud7.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png';
    cloud7.onload = function(){
    cloud7_x = 200;
        cloud7_y = 75;
};

// init cloud2
    cloud2 = new Image();
    cloud2.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud60.png';
    cloud2.onload = function(){
    cloud2_x = max-100;
        cloud2_y = 15;
};

// init cloud4
    cloud4 = new Image();
    cloud4.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud50.png';
    cloud4.onload = function(){
    cloud4_x = max-300;
        cloud4_y = -15;
};

// init cloud6
    cloud6 = new Image();
    cloud6.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud70.png';
    cloud6.onload = function(){
    cloud6_x = max-560;
        cloud6_y = 8;
};

// init cloud8
    cloud8 = new Image();
    cloud8.src = 'http://www.flunki.com/templates/celebs_plazza/images/cloud40.png';
    cloud8.onload = function(){
    cloud8_x = 0;
        cloud8_y = 38;
};

return setInterval(main_loop, 10);
}

function update(){


cloud1_x -= .05;
if (cloud1_x < -128) {
cloud1_x = max;
}
cloud3_x -= .2;
if (cloud3_x < -128) {
cloud3_x = max;
}
cloud5_x -= .15;
if (cloud5_x < -128) {
cloud5_x = max;
}
cloud7_x -= .1;
if (cloud7_x < -128) {
cloud7_x = max;
}
cloud2_x += .1;
if (cloud2_x>max ) {
cloud2_x  = -128;
}
cloud4_x += .05;
if (cloud4_x>max ) {
cloud4_x  = -128;
}
cloud6_x += .15;
if (cloud6_x>max ) {
cloud6_x  = -128;
}
cloud8_x += .2;
if (cloud8_x>max ) {
cloud8_x  = -128;
}
}

function draw() {

ctx.drawImage(background,0,0);
ctx.drawImage(cloud1, cloud1_x, cloud1_y);
ctx.drawImage(cloud2, cloud2_x, cloud2_y);
ctx.drawImage(cloud3, cloud3_x, cloud3_y);
ctx.drawImage(cloud4, cloud4_x, cloud4_y);
ctx.drawImage(cloud5, cloud5_x, cloud5_y);
ctx.drawImage(cloud6, cloud6_x, cloud6_y);
ctx.drawImage(logo,logopos,0);
ctx.drawImage(cloud7, cloud7_x, cloud7_y);
// ctx.drawImage(cloud8, cloud8_x, cloud8_y);

}

function main_loop() {
    draw();
    update();
}

window.addEvent('domready', function() {
    init();
});
</script>

  </section>
</body>
</html>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9273803

复制

相似问题

问当用户离开首页时，为什么我的HTML5 <CANVAS>动画不能在Joomla中正确显示
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当用户离开首页时，为什么我的HTML5 <CANVAS>动画不能在Joomla中正确显示EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问当用户离开首页时，为什么我的HTML5 <CANVAS>动画不能在Joomla中正确显示
EN