我想在画布上绘图，使用鼠标效果很好，但是我必须如何修改代码才能使其在 iPad 或 Nexus 上运行？
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = window.innerWidth;
var height = window.innerHeight;
canvas.height = height;
canvas.width = width;
canvas.addEventListener('mousedown', function(e) {
this.down = true;
this.X = e.pageX ;
this.Y = e.pageY ;
}, 0);
canvas.addEventListener('mouseup', function() {
this.down = false;
}, 0);
canvas.addEventListener('mousemove', function(e) {
if(this.down) {
with(ctx) {
beginPath();
moveTo(this.X, this.Y);
lineTo(e.pageX , e.pageY );
ctx.lineWidth=1;
stroke();
}
this.X = e.pageX ;
this.Y = e.pageY ;
}
}, 0);
这是一个 HTML 文件，可用于绘制鼠标和触摸事件。
<!DOCTYPE html>
<html><head><meta charset="utf-8"/><script type='text/javascript'>
window.addEventListener('load', function () {
// get the canvas element and its context
var canvas = document.getElementById('sketchpad');
var context = canvas.getContext('2d');
var isIdle = true;
function drawstart(event) {
context.beginPath();
context.moveTo(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
isIdle = false;
}
function drawmove(event) {
if (isIdle) return;
context.lineTo(event.pageX - canvas.offsetLeft, event.pageY - canvas.offsetTop);
context.stroke();
}
function drawend(event) {
if (isIdle) return;
drawmove(event);
isIdle = true;
}
function touchstart(event) { drawstart(event.touches[0]) }
function touchmove(event) { drawmove(event.touches[0]); event.preventDefault(); }
function touchend(event) { drawend(event.changedTouches[0]) }
canvas.addEventListener('touchstart', touchstart, false);
canvas.addEventListener('touchmove', touchmove, false);
canvas.addEventListener('touchend', touchend, false);
canvas.addEventListener('mousedown', drawstart, false);
canvas.addEventListener('mousemove', drawmove, false);
canvas.addEventListener('mouseup', drawend, false);
}, false); // end window.onLoad
</script></head><body encoding='utf8'>
<canvas id='sketchpad' width='500' height='500' style='border:1px solid #777'/>
</body></html>
您需要使用的事件是touchstart、touchend、 和touchmove，它们应该与上面的功能相对应。我不知道事件是否可以像在 jQuery 中那样在普通 JS 中轻松堆叠，但是您应该能够通过将每个事件转换为函数来支持鼠标和触摸：
var myMoveEvent = function (e) {
if(this.down) {
with(ctx) {
beginPath();
moveTo(this.X, this.Y);
lineTo(e.pageX , e.pageY );
ctx.lineWidth=1;
stroke();
}
this.X = e.pageX ;
this.Y = e.pageY ;
}
}
canvas
.addEventListener('mousemove', function(e) {
myMoveEvent(e);
}, 0)
.addEventListener('touchmove', function(e) {
myMoveEvent(e);
}, 0);