本教程旨在解决基于html canvas的绘图应用在桌面浏览器运行正常，但在移动端浏览器无法响应用户绘制的问题。核心在于纠正对触摸事件坐标的错误处理，通过计算触摸点相对于canvas元素的准确位置，并利用`event.preventdefault()`阻止浏览器默认行为，从而实现移动端流畅的绘图体验。
在开发基于HTML Canvas的交互式应用，特别是绘图工具时，开发者常会遇到一个常见问题：应用在桌面浏览器上运行良好，但移植到移动设备时却无法正常工作。这通常是由于桌面端的鼠标事件（如mousedown, mousemove, mouseup）与移动端的触摸事件（touchstart, touchmove, touchend）在事件对象属性上的差异所导致的。本文将详细探讨这一问题，并提供一套健壮的解决方案。
1. 理解桌面与移动端事件的差异
在桌面环境中，我们通常依赖MouseEvent对象中的offsetX和offsetY属性来获取鼠标指针相对于目标元素的坐标。这些属性直接提供了相对于触发事件的DOM元素内容区域的X和Y坐标，非常方便。
然而，在移动设备上，TouchEvent对象并不直接提供offsetX和offsetY。取而代之的是，TouchEvent包含一个touches属性，它是一个TouchList对象，其中包含了当前屏幕上所有触摸点的信息。每个Touch对象都有clientX、clientY、pageX、pageY、screenX、screenY等属性，这些属性提供的是触摸点相对于视口、文档或屏幕的坐标。
因此，如果直接在触摸事件处理函数中使用event.offsetX和event.offsetY，将无法获取到正确的坐标，导致绘图功能失效。
2. 解决方案：精确计算触摸点坐标
要解决移动端触摸事件的坐标问题，我们需要执行以下两个关键步骤：
2.1 获取触摸点相对于Canvas的精确坐标
由于Touch对象提供的是视口（viewport）坐标（clientX, clientY），我们需要将其转换为相对于Canvas元素的局部坐标。这可以通过以下公式实现：
- offsetX = event.touches[0].clientX - canvas.getBoundingClientRect().left
- offsetY = event.touches[0].clientY - canvas.getBoundingClientRect().top
其中：
- event.touches[0]：表示当前触摸列表中的第一个触摸点。在单指绘图场景中，我们通常只关心第一个触摸点。
- canvas.getBoundingClientRect()：返回一个DOMRect对象，提供了Canvas元素的大小及其相对于视口的位置。left和top属性分别表示Canvas左上角相对于视口左上角的距离。
为了代码的复用性和可维护性，我们可以创建一个辅助函数来统一处理鼠标事件和触摸事件的坐标获取：
const getXY = (event) => {
let [offsetX, offsetY] = [event.offsetX, event.offsetY]; // 尝试获取鼠标事件的offsetX/Y
// 如果是触摸事件，则通过计算获取坐标
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];
};2.2 阻止浏览器默认行为
在移动设备上，触摸事件（特别是touchstart和touchmove）往往会触发浏览器的一些默认行为，例如页面滚动、缩放等。这些行为会干扰我们的绘图操作。为了确保触摸事件只用于绘图，我们需要在touchstart和touchmove事件处理函数中调用event.preventDefault()。
const startDrawing = event => {
event.preventDefault(); // 阻止默认的滚动或缩放行为
isMouseDown = true;
[x, y] = getXY(event); // 使用统一的坐标获取函数
};
const drawLine = event => {
if (isMouseDown) {
event.preventDefault(); // 阻止默认的滚动或缩放行为
const [newX, newY] = getXY(event);
context.beginPath();
context.moveTo(x, y);
context.lineTo(newX, newY);
context.stroke();
x = newX;
y = newY;
}
};3. 完整的代码示例
下面是整合了上述解决方案的完整JavaScript、HTML和CSS代码：
HTML 结构 (index.html)
移动端Canvas绘图应用 Px
CSS 样式 (style.css)
.paint-canvas {
border: 1px black solid;
display: block;
margin: 1rem;
touch-action: none; /* 禁用浏览器默认的触摸手势，如滚动、缩放 */
}
.color-picker {
margin: 1rem 1rem 0 1rem;
}注意： 在CSS中添加 touch-action: none; 可以进一步优化移动端体验，它告诉浏览器该元素上的触摸事件不应触发任何默认的平移、缩放或其他手势。
JavaScript 逻辑 (script.js)
// 辅助函数：获取鼠标或触摸事件的Canvas局部坐标
const getXY = (event) => {
let [offsetX, offsetY] = [event.offsetX, event.offsetY];
if (event.touches && event.touches[0]) {
const rect = event.target.getBoundingClientRect();
offsetX = (event.touches[0].clientX - rect.left);
offsetY = (event.touches[0].clientY - rect.top);
}
return [offsetX, offsetY];
};
// 获取Canvas元素及其2D绘图上下文
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); // 获取当前触摸或鼠标点击的坐标
};
// 绘制线条函数
const drawLine = event => {
if (isMouseDown) {
event.preventDefault(); // 阻止浏览器默认行为
const [newX, newY] = getXY(event); // 获取新的触摸或鼠标移动的坐标
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 }); // 使用非被动监听器确保preventDefault生效4. 注意事项与最佳实践
- event.preventDefault() 的使用时机： 务必在touchstart和touchmove事件中调用event.preventDefault()，以防止浏览器默认的滚动、缩放行为干扰绘图。对于touchend，通常不需要调用，因为此时触摸已结束。
- 被动事件监听器（Passive Event Listeners）： 在某些情况下，浏览器可能会默认将事件监听器视为“被动”的，这意味着它们不能调用preventDefault()来阻止滚动。如果遇到preventDefault()无效的情况，可以显式地将addEventListener的第三个参数设置为{ passive: false }，如示例中mousewheel事件所示。
- 多点触控： 本教程的getXY函数仅处理了event.touches[0]，即第一个触摸点。如果需要支持多点触控（例如双指缩放、多指绘图），则需要遍历event.touches数组并根据业务逻辑处理每个触摸点。
- 性能优化： 在touchmove事件中进行频繁的绘图操作可能会影响性能，尤其是在旧设备上。可以考虑使用节流（throttle）或防抖（debounce）技术来限制drawLine函数的调用频率。
- 用户体验： 考虑为用户提供视觉反馈，例如在触摸开始时显示一个小的圆点，或者在绘图过程中高亮显示当前笔触。
总结
通过上述方法，我们成功解决了Canvas绘图应用在移动端触摸事件不生效的问题。核心在于理解鼠标事件与触摸事件在坐标获取上的差异，并通过计算event.touches[0].clientX/Y与Canvas元素位置的相对值来获取准确的局部坐标，同时利用event.preventDefault()阻止移动端浏览器的默认手势行为。遵循这些实践，可以确保你的Canvas绘图应用在桌面和移动设备上都能提供一致且流畅的用户体验。
