H5基于Canvas实现电子签名并生成PDF文档

3. 注册监听事件

---

let beginX: number, beginY: number;

const canvas: HTMLCanvasElement = canvasDom.current;

const ctx = canvas.getContext(‘2d’);

ctx.fillStyle = ‘#fff’;

ctx.fillRect(0, 0, canvas.width, canvas.height);

canvas.addEventListener(‘touchstart’, function(event: any) {

event.preventDefault(); // 阻止在canvas画布上签名的时候页面跟着滚动

beginX = event.touches[0].clientX - this.offsetLeft;

beginY = event.touches[0].pageY - this.offsetTop;

});

canvas.addEventListener(‘touchmove’, (event: any) => {

event.preventDefault(); // 阻止在canvas画布上签名的时候页面跟着滚动

event = event.touches[0];

let stopX = event.clientX - canvas.offsetLeft;

let stopY = event.pageY - canvas.offsetTop;

writing(beginX, beginY, stopX, stopY, ctx);

beginX = stopX; // 这一步很关键，需要不断更新起点，否则画出来的是射线簇

beginY = stopY;

});