jquery - 滚动时要重新计算的画布高度

Question

一个快速演示，展示我的页面如何使用可制动高度的画布。即使向下滚动，我也需要使此画布显示。目前它计算第一个窗口视图的高度。 演示：

(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;到您的画布元素来解决此问题。

CSS

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

jsfiddle