javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?

問題描述

canvas在響應mousedown事件時,可以通過event.offsetX和offsetY來提取元素內坐標,那我換成了touchstart后沒有offsetX和offsetY.該在哪里找到元素內坐標呢?

問題解答

在我的 canvas 地圖庫 Sinomap 中處理的算法是這樣的（有改動）：

// 注意這里是為 canvas 的 DOM 元素增加 Listener 而非 canvas 的 ctxdocument .getElementById(’my-canvas’) .addEventListener(’click’, updateHandler, false)function updateHandler (e) { // canvas 為你的 canvas ctx 變量 const box = canvas.getBoundingClientRect() const mouseX = (e.clientX - box.left) * canvas.width / box.width const mouseY = (e.clientY - box.top) * canvas.height / box.height console.log([mouseX, mouseY])}回答2：

touch事件 你需要 獲取 e.touches[0].pageX 或者其他坐標，至于touchend 的話，為了兼容性考慮，最好用e.changedTouches