设置画布的高度以覆盖整个可滚动页面(Setting height of canvas to cover entirety of scrollable page)

设置画布的高度以覆盖整个可滚动页面(Setting height of canvas to cover entirety of scrollable page)

我的canvas元素目前具有以下属性：

var c = document.getElementById("c"); var ctx = c.getContext("2d"); //making the canvas full screen c.height = window.innerHeight; c.width = window.innerWidth;

当我将画布放在一个内容超出屏幕高度的页面上时，当我向下滚动时画布会切断，这是可以预料的。 如何更改height属性以使画布延伸到页面上的内容？

My canvas element currently has the following attributes:

var c = document.getElementById("c"); var ctx = c.getContext("2d"); //making the canvas full screen c.height = window.innerHeight; c.width = window.innerWidth;

When I place the canvas on a page which has more content than can fit in the height of the screen, the canvas cuts off when I scroll down, which is to be expected. How do I change the height property to get the canvas to extend as far down as there is content on the page?

最满意答案

用这个：

var c = document.getElementById("c"); var ctx = c.getContext("2d"); //making the canvas full screen c.height = document.getElementsByTagName('body')[0].scrollHeight; c.width = window.innerWidth;

Use this:

var c = document.getElementById("c"); var ctx = c.getContext("2d"); //making the canvas full screen c.height = document.getElementsByTagName('body')[0].scrollHeight; c.width = window.innerWidth;