我创建了一个 jQuery 刮刮票，它的工作方式是用户可以左键单击并按住并移动光标以刮掉顶部图像以查看下面的图像。这适用于鼠标事件。我也希望能够在 iPad 上使用（触摸事件）。我该如何修改它？
var topImage = new Image();
var bottomImage = new Image();
var coinImage = new Image();
bottomImage.src = "images/question.png";
coinImage.src = "images/coin.png";
function init()
{
var isMouseDown = false;
var canvasWidth = $('#canvas').width();
var canvasHeight = $('#canvas').height();
$('body').append('<canvas id="overlay" width="'+canvasWidth+'" height="'+canvasHeight+'" />'); // Create the coin overlay canvas
var overlayctx = $('canvas')[1].getContext('2d');
overlayctx.drawImage(coinImage, 0,0);
function scratchOff(x, y)
{
mainctx.save();
mainctx.beginPath();
mainctx.arc(x,y,radius,0,Math.PI*2,false); // we don't fill or stroke the arc intentionally
mainctx.clip();
mainctx.drawImage(bottomImage, 0, 0);
mainctx.restore();
}
$('#overlay').mousedown(function(e){
isMouseDown = true;
var relX = e.pageX - this.offsetLeft;
var relY = e.pageY - this.offsetTop;
scratchOff(relX, relY, true);
});
$('#overlay').mousemove(function(e){
var relX = e.pageX - this.offsetLeft;
var relY = e.pageY - this.offsetTop;
overlayctx.clearRect(0,0,canvasWidth,canvasHeight);
overlayctx.drawImage(coinImage, relX-radius, relY-radius);
if (isMouseDown) scratchOff(relX, relY, false);
});
$('#overlay').mouseup(function(e){
isMouseDown = false;
});
var mainctx = $('canvas')[0].getContext('2d');
var radius = 20;
topImage.onload = function(){
mainctx.drawImage(topImage, 0, 0);
};
topImage.src = "images/skava.png";
}