Question

我正在编写一个chrome扩展程序，可以在任何打开的网页上附加画布。它通过将画布附加到正文的顶部，并将其dimemsions设置为窗口高度和宽度来实现此目的，以便用户可以在页面顶部绘制。问题是这只会使画布覆盖页面首次加载的部分。当用户向下滚动页面时，我想继续添加到画布的高度。有什么好办法呢？我很感激任何建议。

var canvasDiv = document.createElement("div");
canvasDiv.innerHTML = "<div><canvas id='xyz149'></canvas></div>";
document.body.insertBefore(canvasDiv, document.body.firstChild);
var canvas = document.getElementById("xyz149");
var ctx = canvas.getContext("2d");
canvas.style.position = "absolute";
canvas.style.zIndex = 200;
ctx.canvas.width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
ctx.canvas.height = (window.innerHeight > 0) ? window.innerHeight : screen.height;

我想我应该补充说，制作多个画布对我来说是最后的选择，因为我希望用户能够在整个画布上绘制。我目前还没有在扩展中使用Jquery。谢谢！

更新：

这是我在用户滚动时用来增长画布的事件监听器。

var originalCanvasHeight = ctx.canvas.height;
window.addEventListener("scroll", function() {
  ctx.canvas.height = originalCanvasHeight + document.body.scrollTop;
});

Answer 1

if((window.innerHeight + document.body.scrollTop) > document.body.offsetHeight){
// User is at the bottom of the page, get canvas element and increase the height
}

你需要在上面添加一些类似的东西，然后找到已经添加了多少空间，或者是否要在滚动时以增量增加画布。

注意：如果用户启动并且根本不需要滚动，则此方法需要进一步工作，尽管您可以操纵它以立即开始增长。

如何在用户向下滚动页面

1 个答案: