这是我的代码：
var can = $('#signature')[0],
ctx = can.getContext('2d'),
mousePressed = false,
mouseX = 0,
mouseY = 0;
can.addEventListener('touchmove', onTouchMove, false);
can.addEventListener('touchstart', onTouchStart, false);
can.addEventListener('touchend', onMouseUp, false);
// Tablet
function onTouchMove(event){
if (mousePressed) {
event.preventDefault();
mouseX = (event.targetTouches[0].pageX) - can.offsetLeft;
mouseY = (event.targetTouches[0].pageY) - can.offsetTop;
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
}
function onTouchStart(event){
mousePressed = true;
mouseX = (event.targetTouches[0].pageX) - can.offsetLeft;
mouseY = (event.targetTouches[0].pageY) - can.offsetTop;
ctx.beginPath();
ctx.moveTo(mouesX, mouseY);
}
function onMouseUp(event){
mousePressed = false;
}
// Desktop
can.addEventListener('mousemove', onMouseMove, false);
can.addEventListener('mousedown', onMouseDown, false);
can.addEventListener('mouseup', onMouseUp, false);
function onMouseMove(event) {
if (mousePressed) {
event.preventDefault();
mouseX = event.clientX - can.offsetLeft;
mouseY = event.clientY - can.offsetTop;
ctx.lineTo(mouseX, mouseY);
ctx.stroke();
}
}
function onMouseDown(event) {
mousePressed = true;
mouseX = event.clientX - can.offsetLeft;
mouseY = event.clientY - can.offsetTop;
ctx.beginPath();
ctx.moveTo(mouseX, mouseY);
}
$('#clearsig')[0].addEventListener('click', clearSignature, false);
function clearSignature() {
ctx.clearRect(0, 0, can.width, can.height);
}
的HTML：
<canvas id="signature" width="800" height="350" style="border:1px solid #000;"></canvas>
在桌面上，一切都用鼠标画得很好，我没有问题。然而，在我的银河选项卡 3 上，当我在画布上绘图时，线条会画出锯齿形图案。不知道为什么会发生这种情况或如何解决它。