javascript - Canvas 在 html 中获取整个文档正文并使其隐藏但可绘制

Question

我在关于如何在画布中绘制http://jsfiddle.net/ArtBIT/kneDX/的 stackoverflow 问题中发现了这一点，现在我希望画布覆盖我的整个 html 页面。例如：

<body>
  <div id="2">
    //code
  </div>
  <div id="2">
    //code
  </div>
</body>

因此画布将附加到页面上，用户可以在页面内容上进行绘制。那么有没有什么方法可以创建画布，以便将 100% 的身体隐藏在绘图线之外？

编辑：

如何在上面的代码中不画圆圈连续画线？当您将鼠标移过文本时，还有什么方法可以在文本上绘制一些东西而不选择它？

score 3 · Accepted Answer

首先，使画布的height和width属性等于页面高度和页面宽度。（获取这些值非常困难，因此请参阅链接问题以了解最佳方法——或者只使用 jQuery。）

接下来，添加一些 CSS 以使画布位于页面的绝对左上角：

#canvas {
    position: absolute;
    top: 0;
    left: 0;
}

然后，不要像当前那样通过调用来更改画布的背景颜色ctx.clearTo。画布默认是透明的，所以只要不改变背景颜色，你就可以看到它下面的页面。

score 1 · Accepted Answer

传入正确的宽度和高度参数而不是 (200, 200)

使用window.screen.width并window.screen.height给你这个：http: //jsfiddle.net/kneDX/878/

更新：

有了这个，我们最终将画布与窗口一样大，而不是与客户区一样大。请参阅apsillers 的回答。

2 回答 2