Начальные координаты события касания

Question

Я искал ответ, но не смог найти. Моя проблема:

Мне нужен объект, чтобы появиться на холсте, когда я касаюсь его и исчезаю, когда отменяю событие касания (поднимите палец). Однако мне нужен объект, чтобы иметь исходные координаты исходного положения касания, то есть я не хочу, чтобы он двигался пальцем.

var can = document.getElementById('can'); 
var ctx = can.getContext('2d'); 

var WIDTH = can.width; 
var HEIGHT = can.height; 
var canX; 
var canY; 
var mouseIsDown = 0; 
var requestAnimFrame = window.requestAnimationFrame || 
        window.webkitRequestAnimationFrame || 
        window.mozRequestAnimationFrame || 
        window.oRequestAnimationFrame || 
        window.msRequestAnimationFrame; 


var image = new Image(); 
image.src = '1.png'; 


function init(){ 
    can.addEventListener("mousedown", mouseDown, false); 
    can.addEventListener("mousemove", mouseXY, false); 

    document.body.addEventListener("mouseup", mouseUp, false); 
    loop(); 
} 


function mouseUp() { 
    mouseIsDown = 0; 
    mouseXY(); 
} 


function mouseDown() { 
    mouseIsDown = 1; 
    mouseXY(); 
} 


function mouseXY(e) { 
    if (!e) 
     e = event; 
    canX = e.pageX - can.offsetLeft; 
    canY = e.pageY - can.offsetTop; 
} 


function loop(){ 
    if(mouseIsDown===1){ 
     draw(); 
    } else 
    ctx.clearRect(0,0,WIDTH, HEIGHT); 
    requestAnimFrame(loop); 
} 


function draw(){ 
    ctx.clearRect(0,0,WIDTH, HEIGHT); 
    ctx.drawImage(image,0,0,40,40,canX-20,canY-20,40,40); 
} 

Answer 1

Вам необходимо сохранить начальное положение мыши/касания в отдельной паре переменных.

var initialCanX, initialCanY; 

function mouseDown(e) { 
    mouseIsDown = 1; 

    initialCanX = e.pageX - can.offsetLeft; 
    initialCanY = e.pageY - can.offsetTop; 

    mouseXY(e); 
} 

А затем, в функции рисования, используйте эти координаты, чтобы нарисовать второе изображение.

function draw(){ 
    ctx.clearRect(0, 0, WIDTH, HEIGHT); 
    ctx.drawImage(image, canX, canY); // the moving image 
    ctx.drawImage(image2, initialCanX, initialCanY); // the static image 
}