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

时间:2013-06-20 14:55:38

标签: jquery html5 css3 canvas resize

一个快速演示,展示我的页面如何使用Canvas制动高度。 即使向下滚动,我也需要显示此画布。目前它计算第一个窗口视图的高度。 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
    }
})();

任何建议都会非常感激。

1 个答案:

答案 0 :(得分:1)

您可以通过向canvas元素添加position: fixed;来解决此问题。

<强> CSS

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

jsfiddle