鍍金池/ 問答/HTML5  UI  HTML/ 如何讓有鼠標(biāo)交互的 canvas 做網(wǎng)站背景,canvas交互操作不被頂層的DI

如何讓有鼠標(biāo)交互的 canvas 做網(wǎng)站背景,canvas交互操作不被頂層的DIV 阻隔?

canvas 和頁面的dom 互不遮擋。 相互獨(dú)立,canvas 用來做網(wǎng)站背景,但是可以交互的。

clipboard.png

這canvas 就有鼠標(biāo)交互效果。
上面放過登錄框,下面canvas的交互就失效了。而需求是互不影響。

回答
編輯回答
神曲

clipboard.png
紅色框放登錄框, 并且z-index:設(shè)置的高于canvas;阻止掉登錄框部分的默認(rèn)事件;保證canvas 不會(huì)影響到登錄功能;其次就是登錄框除紅色框部分不能有元素壓蓋canvas;不然就會(huì)失去canvas的交互;
究其原因: 結(jié)構(gòu)樣式問題;

2018年7月19日 04:27
編輯回答
熟稔

在canvas上做交互,無非是在對canvas添加事件,獲取mousemove的坐標(biāo),然后在canvas上做相應(yīng)的交互效果。

將獲取mousemove坐標(biāo)的這一步放在document上,也就是將mousemove事件添加到document上,這樣canvas作為背景的話完全不會(huì)受影響。

2018年4月27日 16:24
編輯回答
尐懶貓

看一下他這個(gè)網(wǎng)站,背景使用canvas做的https://www.cnblogs.com/zhuch...

2017年3月8日 08:02