Question

我有一个javascript画布动画，我将其用作“背景”部分。我已经使用javascript将画布宽度和高度设置为与高度和宽度相同的部分，并且它可以工作。在一个部分（除了画布）之外还有另一个div，我设置了各个部分的高度，从不小于这个div的内容高度，这也有效。我已经使用了去抖动和调整大小功能，这也很好但是当画布高度大于屏幕尺寸时，我有动画问题。这是发生这种情况的页面的URL，因为我无法用语言解释动画发生了什么：

https://tjaseda.github.io/Portfolio/

当窗口调整为横向模式（高度＆gt;宽度）时，最好看到此问题。正如您所看到的那样，画布正确调整大小并且内容永远不会溢出它，但是您能解释动画的行为是什么原因吗？

以下是代码：

HTML：

<section id ="header" class="top">
      <canvas id="myCanvas">
      </canvas>
      <div class="vertical-center hero-text text-center">  
         <div class="container">
         </div>
     </div>
  </section>

CSS：

.top {
  position: relative;
  width: 100%;
  height: auto;
    min-height: 100%;
}

canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  background: linear-gradient(to bottom right, #4169E1, #00BFFF);
}

.vertical-center {
    position: relative;
    z-index: 10;
    padding-top: 10%;
    height: 100%; 
    width: 90%;
    margin: 0 auto;
}

JAVASCRIPT：

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(func, 0);
        if (callNow) func.apply(context, args);
    };
};

var canvas = document.getElementById('myCanvas');
var header = document.getElementById('header');

    var c = canvas.getContext('2d');
    canvas.width = header.offsetWidth;
    canvas.height = header.offsetHeight;

var myEfficientFn = debounce(function() {
    canvas.width = header.offsetWidth;
    canvas.height = header.offsetHeight;

    var innerWidth = canvas.width;
    var innerHeight = canvas.height;

}, 50);

window.addEventListener('resize', myEfficientFn);

此JS代码用于去抖动和调整大小。我有一个requestAnimationFrame（animate）;在函数内部（动画）

非常感谢任何帮助。

当画布比屏幕尺寸更大时，Javascript画布动画无法正常工作

0 个答案: