jquery - 滚动时重新计算 Canvas 高度

Question

一个快速演示，展示我的页面如何使用 Canvas 来降低高度。即使向下滚动，我也需要让这个 Canvas 显示出来。目前它计算第一个窗口 View 的高度。 demo :

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

    // resize the canvas to fill browser window dynamically
    window.addEventListener('resize', resizeCanvas, false);

    function resizeCanvas() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;


            //canvas is showing on my demo in Fiddle

            /**
             * drawings need to be inside this function otherwise they will be reset when 
             * you resize the browser window and the canvas goes will be cleared.
             */
            drawStuff(); 
    }
    resizeCanvas();

    function drawStuff() {
            // do your drawing stuff here
    }
})();

如有任何建议，我们将不胜感激。

Answer 1

您可以通过将 position: fixed; 添加到您的 Canvas 元素来解决此问题。

CSS

canvas {
    position:fixed;
    z-index:1;
}

jsfiddle