javascript - How to get the coordinates of the touch event in the canvas in native canvas?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - How to get the coordinates of the touch event in the canvas in native canvas?

黄舟 2017-05-24 11:36:27

622

When canvas responds to the mousedown event, it can extract the internal coordinates of the element through event.offsetX and offsetY. Then I changed to touchstart and there is no offsetX and offsetY. Where should I find the internal coordinates of the element?

黄舟

人生最曼妙的风景，竟是内心的淡定与从容！

reply all (3)

曾经蜡笔没有小新2017-05-24 11:38:27 3 floor

The algorithm processed in my canvas map library Sinomap is this (with changes):

// 注意这里是为 canvas 的 DOM 元素增加 Listener 而非 canvas 的 ctx document .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]) }