canvas 穿透效果，canvas做网页背景无法选取后面的元素问题

canvas 穿透效果，canvas做网页背景无法选取后面的元素问题

遇到这个问题这里记录一下，解决方案也非常简单

• 在我们把 canvas 作为 网站的 body 背景的 时候，如果z-index 的层级没注意设计，默认情况下，canvas 会遮挡网站上的 a 链接 和一些按钮的

  • 遇到这个 问题 我们只需要在 canvas 背景中添加一个css 属性：pointer-events: none
  • 你可以选择后期用 js 添加，也可以在创建的 时候直接写上，如果是canvas 在本地 可以直接写上，如果是请求而来的，可以用js 给相应的 canvas 添加这一条属性

语法

• pointer-events：auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
• 默认值：auto
• 取值
  • auto： 与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
  • none：元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶触发父元素的事件侦听器。
    其他值只能应用在SVG上。

说明：
设置或检索在何时成为属性事件的target。
使用pointer-events来阻