在Canvas中实现横屏手写签名，需要监听触摸事件并记录下触摸点的位置。以下是实现横屏手写签名的基本步骤和示例代码：
创建一个HTML页面，并在其中放置一个<canvas>元素。
使用JavaScript来处理触摸事件，记录触摸开始（touchstart）、移动（touchmove）和结束（touchend）的位置。
在<canvas>上绘制路径，使用beginPath()、moveTo()、lineTo()和stroke()方法。
HTML:
html
<canvas id="signature-pad" width="300" height="150"></canvas>
JavaScript:
const canvas = document.getElementById('signature-pad');
const ctx = canvas.getContext('2d');
let isDrawing = false;
canvas.addEventListener('touchstart', (e) => {
isDrawing = true;
const touch = e.touches[0];
const { x, y } = convertToCanvasCoordinates(touch.clientX, touch.clientY);
ctx.beginPath();
ctx.moveTo(x, y);
});
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
if (!isDrawing) return;
const touch = e.touches[0];
const { x, y } = convertToCanvasCoordinates(touch.clientX, touch.clientY);
ctx.lineTo(x, y);
ctx.stroke();
});
canvas.addEventListener('touchend', () => {
isDrawing = false;
});
function convertToCanvasCoordinates(x, y) {
const rect = canvas.getBoundingClientRect();
return {
x: x - rect.left,
y: y - rect.top
};
}
确保在实际应用中处理触摸设备的兼容性问题，并考虑增加清除签名的功能。上述代码示例假设<canvas>元素的宽度和高度已经设置为横屏时所需的尺寸。