滾動時將重新計算畫布高度

一個快速演示，展示我的頁面如何使用制動高度的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 
    } 
})();

任何建議，將不勝感激。

來源

2013-06-20 user2505665

我不知道確切的功能，你想要的，但使用''的位置是：固定;''保持在視口中的畫布，無論滾動。 –

謝謝，這是一個簡單的修復！ omg謝謝。 – user2505665

很高興有幫助。我發佈了答案^^的「官方」版本 –

您可以通過將position: fixed;添加到您的畫布元素來解決此問題。

CSS

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

jsfiddle

來源

2013-06-20 15:17:04

滾動時將重新計算畫布高度

回答

相關問題