javascript - 在 Windows 触摸屏上，pageX、pageY 不会映射到 100% 画布上的坐标。

Question

如果您愿意，可以跟随这个 jsfiddle 。我有一个 100% 宽度和高度的画布和一个将大小设置为 1 的范围滑块。所以我正在使用 fillRect(touch.pageX, touch.pageY, 1, 1); 但是当我用手指在画布上绘图时，输出相对于输入会按比例缩小。我必须做什么才能获得页面上元素的位置

我只是将 pageX 和 pageY 坐标传递给 fillRect 函数，但不知何故，上下文网格看起来比触摸坐标空间大。

context.fillRect(touches[i].pageX, touches[i].pageY, size, size);

Answer 1

那天晚上晚些时候我找到了解决方案。http://www.ckollars.org/canvas-two-coordinate-scales.html列出了屏幕和画布坐标的转换因子。