本文旨在解决基于html canvas的绘图应用在桌面浏览器正常工作，但在移动端触控设备上无法绘制的问题。核心在于桌面端鼠标事件（如`offsetx`/`offsety`）与移动端触控事件（`touchstart`/`touchmove`/`touchend`）处理机制的差异。我们将详细介绍如何通过`event.touches[0]`结合`getboundingclientrect()`计算精确触控坐标，并使用`event.preventdefault()`优化用户体验，确保绘图功能在移动设备上流畅运行。
问题分析：桌面与移动端事件的差异
在开发基于Canvas的绘图应用时，开发者通常会使用鼠标事件（mousedown, mousemove, mouseup）来捕捉用户交互。这些事件提供了event.offsetX和event.offsetY属性，可以直接获取鼠标相对于目标元素（例如Canvas）的坐标，这在桌面浏览器环境下工作良好。
然而，当应用移植到移动设备时，相同的代码往往会失效。这是因为移动浏览器主要响应触控事件（touchstart, touchmove, touchend, touchcancel），而不是鼠标事件。尽管现代浏览器在某些情况下会将触控事件模拟为鼠标事件，但event.offsetX和event.offsetY在触控事件中并不总是可用，或者其行为可能与预期不符。
具体来说，触控事件对象event中不直接包含offsetX和offsetY。取而代之的是，它提供一个touches属性，这是一个TouchList对象，包含了当前屏幕上所有活动的触控点。对于单点触控绘图应用，我们通常关注event.touches[0]，它代表了第一个触控点。Touch对象包含clientX, clientY, pageX, pageY, screenX, screenY等属性，这些属性表示触控点相对于不同视口或屏幕的坐标。
解决方案：精确获取触控坐标与事件阻止
为了在移动端正确获取触控点相对于Canvas的坐标，我们需要进行一些计算。基本思路是：
- 获取触控点相对于视口的坐标（event.touches[0].clientX和event.touches[0].clientY）。
- 获取Canvas元素相对于视口的位置和大小（canvas.getBoundingClientRect()）。
- 通过两者相减，计算出触控点相对于Canvas左上角的精确坐标。
此外，移动浏览器在响应触控事件时，可能会触发默认行为，例如页面滚动或缩放。为了确保绘图体验的流畅性，我们需要在touchstart和touchmove事件中调用event.preventDefault()来阻止这些默认行为。
核心坐标计算函数
以下是一个通用的getXY辅助函数，它能够根据传入的事件类型（鼠标或触控）返回正确的offsetX和offsetY：
/**
* 获取事件相对于目标元素的X、Y坐标
* @param {Event} event 鼠标或触控事件对象
* @returns {Array<number>} 包含 [offsetX, offsetY] 的数组
*/
const getXY = (event) => {
let offsetX = event.offsetX;
let offsetY = event.offsetY;
// 如果是触控事件，则通过 touches 属性计算坐标
if (event.touches && event.touches[0]) {
const rect = event.target.getBoundingClientRect(); // 获取目标元素（Canvas）在视口中的位置和大小
offsetX = event.touches[0].clientX - rect.left;
offsetY = event.touches[0].clientY - rect.top;
}
return [offsetX, offsetY];
};这个函数首先尝试使用event.offsetX和event.offsetY（适用于桌面鼠标事件）。如果检测到event.touches存在且event.touches[0]有效（表示这是一个触控事件），则会使用event.touches[0].clientX和event.touches[0].clientY减去Canvas元素的rect.left和rect.top来计算出相对于Canvas的准确坐标。
整合到绘图逻辑
将getXY函数整合到现有的绘图逻辑中，特别是startDrawing和drawLine函数：
const paintCanvas = document.querySelector('.js-paint');
const context = paintCanvas.getContext('2d');
context.lineCap = 'round'; // 设置线条端点样式为圆形
const colorPicker = document.querySelector('.js-color-picker');
colorPicker.addEventListener('change', event => {
context.strokeStyle = event.target.value; // 更新画笔颜色
});
const lineWidthRange = document.querySelector('.js-line-range');
const lineWidthLabel = document.querySelector('.js-range-value');
lineWidthRange.addEventListener('input', event => {
const width = event.target.value;
lineWidthLabel.innerHTML = width;
context.lineWidth = width; // 更新画笔宽度
});
let x = 0, y = 0; // 当前绘图起点坐标
let isMouseDown = false; // 标记是否正在绘图
// 停止绘图
const stopDrawing = () => {
isMouseDown = false;
};
// 开始绘图
const startDrawing = event => {
event.preventDefault(); // 阻止默认的触控行为（如滚动、缩放）
isMouseDown = true;
[x, y] = getXY(event); // 使用 getXY 获取起始坐标
};
// 绘制线条
const drawLine = event => {
if (isMouseDown) {
event.preventDefault(); // 阻止默认的触控行为
const [newX, newY] = getXY(event); // 使用 getXY 获取当前坐标
context.beginPath(); // 开始一条新路径
context.moveTo(x, y); // 移动到上一个点
context.lineTo(newX, newY); // 绘制到当前点
context.stroke(); // 描边
x = newX; // 更新上一个点为当前点
y = newY;
}
};
// 桌面鼠标事件监听
paintCanvas.addEventListener('mousedown', startDrawing);
paintCanvas.addEventListener('mousemove', drawLine);
paintCanvas.addEventListener('mouseup', stopDrawing);
paintCanvas.addEventListener('mouseout', stopDrawing); // 鼠标离开Canvas时停止绘图
// 移动端触控事件监听
paintCanvas.addEventListener("touchstart", startDrawing);
paintCanvas.addEventListener("touchend", stopDrawing);
paintCanvas.addEventListener("touchcancel", stopDrawing); // 触控中断时停止绘图
paintCanvas.addEventListener("touchmove", drawLine);
// 阻止在绘图过程中意外触发的鼠标滚轮事件（可选，但推荐）
window.addEventListener('mousewheel', (e) => {
if (isMouseDown) {
e.preventDefault();
}
}, { passive: false }); // 设置 passive: false 以确保 preventDefault 生效HTML 结构 (无变化)
HTML 结构保持不变，它提供了Canvas元素以及颜色选择器和线条宽度调节器。
<p> <input class="js-color-picker color-picker" type="color" /> <input class="js-line-range" max="72" min="1" type="range" value="1" /> <label class="js-range-value">1</label>Px <canvas class="js-paint paint-canvas" height="200" width="200"></canvas> </p>
CSS 样式 (无变化)
CSS 样式也保持不变，用于设置Canvas和控件的基本外观。
.paint-canvas {
border: 1px black solid;
display: block;
margin: 1rem;
}
.color-picker {
margin: 1rem 1rem 0 1rem;
}注意事项与最佳实践
- event.preventDefault() 的重要性：在touchstart和touchmove事件中调用event.preventDefault()至关重要。这不仅可以阻止页面滚动和缩放等默认行为，还能防止浏览器在触控事件后模拟触发鼠标事件，从而避免潜在的冲突或重复绘图。
- passive 事件监听器：在某些情况下，为了性能优化，浏览器会默认将touchstart和touchmove事件监听器设置为passive: true，这意味着在这些事件中调用preventDefault()将无效。如果遇到此问题，需要在addEventListener的第三个参数中明确设置{ passive: false }，如paintCanvas.addEventListener("touchmove", drawLine, { passive: false });。对于本例中的mousewheel事件，也建议进行此设置。
- 多点触控：当前方案仅处理event.touches[0]，即第一个触控点。如果需要支持多点触控（例如捏合缩放、双指移动等），则需要遍历event.touches数组，并根据业务逻辑处理多个触控点。
- 性能优化：对于高频率的touchmove事件，如果绘图操作复杂，可能会影响性能。可以考虑使用节流（throttle）或去抖（debounce）技术来限制drawLine函数的执行频率。
- 离屏Canvas：对于更复杂的绘图应用，可以考虑使用离屏Canvas（OffscreenCanvas）进行渲染，将绘图操作放到Web Worker中执行，从而不阻塞主线程，提升用户体验。
总结
通过上述调整，我们成功解决了Canvas绘图应用在移动端触控设备上无法正常工作的问题。核心在于理解桌面鼠标事件与移动触控事件的差异，并采取相应的策略：使用event.touches[0]结合getBoundingClientRect()精确计算触控坐标，并利用event.preventDefault()阻止默认浏览器行为。遵循这些最佳实践，可以确保您的Canvas绘图应用在不同设备上提供一致且流畅的用户体验。
