Javascript 如何在画布后面与HTML交互？

场景：
我有一个网站，目前在本地托管，我希望能够在网站顶部的画布上绘制，如下所示。但是，我不仅希望允许用户在网站上绘图，而且还希望在用户与该页面的其余部分交互时，将绘图保留在该特定网页上。例如填写表单或与下拉列表交互等。
注意：HTML画布覆盖整个页面（不仅仅是视口）。另外,，将有一个按钮来区分绘图和与HTML的交互



具体问题：
如何在画布存在时与网页上的普通HTML元素交互。我知道画布将从一页重置到另一页，这很好-我不想解决这个问题。我只尝试解决单个页面的问题。

尝试过的方法
我尝试过使用透明度、zIndex和其他css属性

替代解决方案
1。我知道，使用SVG可以解决这个问题，只需将它们覆盖在整个网页的透明DIV中即可。但我不想使用这种方法，如果可能的话，我会坚持使用canvas来寻找解决方案。

---

2.目前HTML画布覆盖了整个页面（不仅仅是视口），因此我认为可以根据页面上的绘制量动态调整画布的大小。不过，我还是使用SVG吧。

思想？我对libs/snippets，任何东西都持开放态度。

解决这个问题的一个方法是：

• 使用CSS将默认点事件设置为无
• 为要用于单击等的元素启用指针事件，包括事件捕捉器（背景、主体或元素）
• 根据您的设计要求，使用主体或元素作为上面未使用的事件的事件捕捉器
• 将画布放在所有事件之上，指针事件设置为“无”

任何没有被可点击元素（或您想用于事件的元素）使用的点击现在都将在后面结束。只需将坐标从该背景元素转移到画布即可进行绘制

演示

演示并非完美无瑕（例如，不考虑本地触摸事件/手势，它画点，而不是线等），但它应该足以显示基本原理，让你去。 我们只是在这里使用body来捕捉任何未被消耗的事件。向下滚动以绘制并单击文本中的第二个链接

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var isDown=假；
设置（）；
window.onresize=设置；
window.onmousedown=函数（e）{
isDown=真；
抽签（e）；
};
window.onmousemove=函数（e）{if（isDown）draw（e）；}；
window.onmouseup=function（）{isDown=false}；
函数设置（）{
canvas.width=window.innerWidth；
canvas.height=parseInt（getComputedStyle（document.body）.getPropertyValue（“height”），10）；
ctx.fillStyle=“rgba（0160255,0.4）”；
}
功能图（e）{
var rect=canvas.getBoundingClientRect（）；
ctx.beginPath（）；
ctx.arc（e.clientX-rect.left，e.clientY-rect.top，15,0,6.28）；
ctx.fill（）；
}

*{/*通过更具体的方式进行优化，这里仅用于演示*/
指针事件：无；
}
a{
颜色：#00c；
指针事件：自动；
光标：指针；
文字装饰：下划线；
}
html，正文{
高度：3500px；
宽度：100%；
}
身体{
指针事件：自动；
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
#海报{
宽度：80%；
保证金：50px自动0自动；
背景：rgba（0,0,0,0.2）；
填充：20px；
框大小：边框框；
z指数：1；
}
#帆布{
位置：绝对位置；
左：0；
排名：0；
z指数：1000；
}

演示
可绘图页
点击我
标准的Lorem-Ipsum通道，从1500年代开始使用“Lorem ipsum door sit amet，一位杰出的献身者，他是一位临时劳工和职业经理人。但是，在最低限度上，我们需要一个实验室来进行日常工作。两人或两人在一个无教区的房间里互相指责。除了偶尔的不轻率行为外，还必须承担因工作而受到伤害的责任。”
西塞罗在公元前45年写的《博诺姆和马洛姆的最终结局》第1.10.32节“所有人都有错误的解释，包括对他人的赞扬，发明者的真实性和准建筑师必须解释清楚。Nemo enim ipsam Voluptate是一个有着丰富经验的人，他是一个理性的人。最重要的一点是，在劳动和就业领域，所有人都有自己的权利、义务和义务。但是最低限度的成本，是否需要在实验室中进行实际操作，是否需要从消费品中获得流动性？在一个国家里，所有的人都应该有自己的权利，这是一种权利