鍍金池/ 問(wèn)答/HTML5  HTML/ canvas動(dòng)畫(huà)被內(nèi)容遮住

canvas動(dòng)畫(huà)被內(nèi)容遮住

在點(diǎn)擊加號(hào)按鈕時(shí)獲取坐標(biāo)位置執(zhí)行canvas動(dòng)畫(huà),動(dòng)畫(huà)內(nèi)弄被文字和圖片遮住,如圖的效果是沒(méi)有設(shè)置層級(jí),看上去是canvas放到了最底層,我也試著把canvas層級(jí)調(diào)的比內(nèi)容高,但是發(fā)現(xiàn)區(qū)域的滾動(dòng)和點(diǎn)擊的事情都被canvas遮住了,這個(gè)應(yīng)該怎么解決,求大佬指教!
clipboard.png
clipboard.png

回答
編輯回答
尐潴豬

提供下思路
1.點(diǎn)擊加號(hào), 有個(gè)紅色的小球會(huì)移動(dòng)到購(gòu)物車,你們現(xiàn)在的處理方式是canvas繪制的.
可以點(diǎn)擊加號(hào)按鈕,手動(dòng)讓canvas層次提高,然后動(dòng)畫(huà)結(jié)束,在回到下層.
這樣有個(gè)缺點(diǎn),就是動(dòng)畫(huà)要快,要不動(dòng)畫(huà)持續(xù)中下滑不了.
2.可以試一試事件的捕獲 . 把點(diǎn)擊和滑動(dòng)都換成捕獲.這樣就遮擋不了事件了.
3.可以用div去實(shí)現(xiàn). 創(chuàng)建div然后做貝塞爾曲線 . css + js 動(dòng)畫(huà)

2018年1月19日 14:12