亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

無法取得滑鼠準(zhǔn)確座標(biāo)的問題:在調(diào)整頁(yè)面大小時(shí)使用HTML5畫布
P粉752290033
P粉752290033 2023-09-12 12:20:33
0
1
859

我想從前端專家那裡創(chuàng)建這個(gè)像素效果

雖然我能夠在全螢?zāi)划嫴忌蠈?shí)現(xiàn)整個(gè)像素效果:

const canvas = getElementById('canvas');

canvas.height = window.innerHeight; // 給畫布設(shè)置全屏高度
canvas.width= window.innerWidth; // 給畫布設(shè)置全屏寬度

並且很容易取得滑鼠的座標(biāo)

const mouse = {
  x: undefined,
  y: undefined
}
canvas.addEventListner('mousemove', function(e) {
  mouse.x = e.x;
  mouse.y = e.y;
}

此時(shí)畫布的寬度和高度與文件相等,因此很容易獲得滑鼠的準(zhǔn)確座標(biāo)。 但是當(dāng)我嘗試使用800px X 400px的尺寸並在其中使用flexbox(如網(wǎng)站所示)時(shí),我的滑鼠座標(biāo)完全混亂了,我花了幾個(gè)小時(shí)來修復(fù),但無法獲得與上述網(wǎng)站中顯示的準(zhǔn)確性。同時(shí)也存在一些與調(diào)整大小相關(guān)的問題。

我想知道如何保持滑鼠的準(zhǔn)確性。

非常感謝您的幫忙。

P粉752290033
P粉752290033

全部回覆(1)
P粉769045426

我相信當(dāng)你使用e.x和e.y時(shí),即使在canvas的事件監(jiān)聽器中使用,它們返回的是相對(duì)於整個(gè)頁(yè)面左上角像素的滑鼠座標(biāo),而不僅僅是canvas的座標(biāo)。如果你所說的"messed up"是指無論你在哪裡點(diǎn)擊,像素效果都會(huì)以某個(gè)固定方向偏移,那麼這可能是你的問題,你應(yīng)該用e.clientX和e.clientY代替e.x和e.y 。 e.clientX中的"client"指的是監(jiān)聽器所針對(duì)的元素,並指定相對(duì)於該元素而不是頁(yè)面給出事件座標(biāo)。如果以其他方式出現(xiàn)問題,那麼我想我沒有答案。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板