touchmove로 터치 스크린에서 mousemove 이벤트를 작동시키는 방법은 무엇입니까?

Question

캔버스 자바 스크립트에서 mousemove 이벤트를 사용하여 배경을 지울 수 있습니다 ...

이제 터치 스크린 (모바일)에 대해 동일한 경험을 얻으려고합니다. 내 코드에 mousemove 및 touchmove 이벤트를 동시에 부여하려면 어떻게해야합니까? touch[XXX] 이벤트에 대한 더 clientX도 clientY 속성이 없기 때문에,

(function() { 
 
    // Creates a new canvas element and appends it as a child 
 
    // to the parent element, and returns the reference to 
 
    // the newly created canvas element 
 

 

 
    function createCanvas(parent, width, height) { 
 
    var canvas = {}; 
 
    canvas.node = document.createElement('canvas'); 
 
    canvas.context = canvas.node.getContext('2d'); 
 
    canvas.node.width = width || 100; 
 
    canvas.node.height = height || 100; 
 
    parent.appendChild(canvas.node); 
 
    return canvas; 
 
    } 
 

 

 

 
    function init(container, width, height, fillColor) { 
 
    var canvas = createCanvas(container, width, height); 
 
    var ctx = canvas.context; 
 
    // define a custom fillCircle method 
 
    ctx.fillCircle = function(x, y, radius, fillColor) { 
 
     /*this.fillStyle = fillColor; 
 
     this.beginPath(); 
 
     this.moveTo(x, y); 
 
     this.arc(x, y, radius, 0, Math.PI * 2, false); 
 
     this.fill();*/ 
 
     var radgrad = ctx.createRadialGradient(x, y, 0, x, y, radius); 
 
     radgrad.addColorStop(0, 'rgba(255,0,0,1)'); 
 
     radgrad.addColorStop(0.8, 'rgba(255,0,0,.9)'); 
 
     radgrad.addColorStop(1, 'rgba(255,0,0,0)'); 
 

 
     // draw shape 
 
     ctx.fillStyle = radgrad; 
 
     ctx.fillRect(x - radius, y - radius, x + radius, y + radius); 
 
    }; 
 
    ctx.clearTo = function(fillColor) { 
 
     ctx.fillStyle = fillColor; 
 
     ctx.fillRect(0, 1, width, height); 
 
    }; 
 
    ctx.clearTo(fillColor || "#ddd"); 
 

 
    // bind mouse events 
 
    canvas.node.onmousemove = function(e) { 
 
     if (!canvas.isDrawing) { 
 
     return; 
 
     } 
 
     var x = e.pageX - this.offsetLeft; 
 
     var y = e.pageY - this.offsetTop; 
 
     var radius = 100; // or whatever 
 
     var fillColor = '#ff0000'; 
 
     ctx.globalCompositeOperation = 'destination-out'; 
 
     ctx.fillCircle(x, y, radius, fillColor); 
 
    }; 
 
    canvas.node.onmouseenter = function(e) { 
 
     canvas.isDrawing = true; 
 
    }; 
 

 
    } 
 

 

 
    var container = document.getElementById('canvas'); 
 
    init(container, 5000, 3000, '#f8fa58'); 
 

 
})();

body { 
 
    margin-left: -10vw; 
 
    margin-top: -30vh; 
 
    background: url(https://i-d-images.vice.com/images/articles/meta/2014/10/21/untitled-article-1413860640.jpg?crop=1xw:0.44513137557959814xh;0xw,0.14219474497681608xh&resize=2000:*&output-format=image/jpeg&output-quality=75) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
#canvas { 
 
    z-index: -1; 
 
    top: 2vh; 
 
    left: -10vw; 
 
    width: 110vw; 
 
    height: 130vh; 
 
    overflow: hidden; 
 
}

<div id="back"></div> 
 
<div id="canvas"></div>

Answer 1

는 동일한 이벤트 핸들러를 사용할 수 있지만 내부는 다르게 이벤트를 처리해야합니다.

터치 이벤트는 멀티 터치 일 수 있으므로이 좌표 속성을 갖는 touches의 배열을 유지합니다.

IMO 두 가지 단계로 이벤트 처리기를 분할하는 것이 더 깨끗합니다. 이벤트 좌표를 추출하려면 ,이 좌표는 무언가를 수행하는 것이 좋습니다.

(function() { 
 
    
 
    // a little verbose but... 
 
    function handleMousemove(event){ 
 
    var x = event.clientX; 
 
    var y = event.clientY; 
 
    draw(x, y); 
 
    } 
 
    function handleTouchmove(event){ 
 
    event.preventDefault(); // we don't want to scroll 
 
    var touch = event.touches[0]; 
 
    var x = touch.clientX; 
 
    var y = touch.clientY; 
 
    draw(x, y); 
 
    } 
 
    // this one can be shared by both touch and move events 
 
    function activateDrawing(event){ 
 
    event.preventDefault(); 
 
    canvas.isDrawing = true; 
 
    } 
 
    function draw(eventX, eventY){ 
 
    var x = eventX - canvas.node.offsetLeft; 
 
    var y = eventY - canvas.node.offsetTop; 
 
    if (!canvas.isDrawing) { 
 
     return; 
 
     } 
 
    var radius = 100; // or whatever 
 
    var fillColor = '#ff0000'; 
 
    ctx.globalCompositeOperation = 'destination-out'; 
 
    ctx.fillCircle(x, y, radius, fillColor); 
 
    } 
 

 
    function createCanvas(parent, width, height) { 
 
    var canvas = {}; 
 
    canvas.node = document.createElement('canvas'); 
 
    canvas.context = canvas.node.getContext('2d'); 
 
    canvas.node.width = width || 100; 
 
    canvas.node.height = height || 100; 
 
    parent.appendChild(canvas.node); 
 
    return canvas; 
 
    } 
 

 
    var canvas, ctx; // got it out to avoid nesting too deeply my handlers; 
 

 
    function init(container, width, height, fillColor) { 
 
    canvas = createCanvas(container, width, height); 
 
    ctx = canvas.context; 
 
    // define a custom fillCircle method 
 
    ctx.fillCircle = function(x, y, radius, fillColor) { 
 
     var radgrad = ctx.createRadialGradient(x, y, 0, x, y, radius); 
 
     radgrad.addColorStop(0, 'rgba(255,0,0,1)'); 
 
     radgrad.addColorStop(0.8, 'rgba(255,0,0,.9)'); 
 
     radgrad.addColorStop(1, 'rgba(255,0,0,0)'); 
 

 
     // draw shape 
 
     ctx.fillStyle = radgrad; 
 
     ctx.fillRect(x - radius, y - radius, x + radius, y + radius); 
 
    }; 
 
    ctx.clearTo = function(fillColor) { 
 
     ctx.fillStyle = fillColor; 
 
     ctx.fillRect(0, 1, width, height); 
 
    }; 
 
    ctx.clearTo(fillColor || "#ddd"); 
 

 
    // bind mouse events 
 
    canvas.node.onmousemove = throttle(handleMousemove); 
 
    canvas.node.ontouchmove = throttle(handleTouchmove); 
 
    canvas.node.onmouseenter = 
 
    canvas.node.ontouchstart = throttle(activateDrawing); 
 

 
    } 
 

 
    var container = document.getElementById('canvas'); 
 
    init(container, 5000, 3000, '#f8fa58'); 
 

 
/* Bonus : throttle these events so they don't fire too often */ 
 
function throttle(callback) { 
 
    var active = false; // a simple flag 
 
    var evt; // to keep track of the last event 
 
    var handler = function(){ // fired only when screen has refreshed 
 
    active = false; // release our flag 
 
    callback(evt); 
 
    } 
 
    return function handleEvent(e) { // the actual event handler 
 
    evt = e; // save our event at each call 
 
    if (!active) { // only if we weren't already doing it 
 
     active = true; // raise the flag 
 
     requestAnimationFrame(handler); // wait for next screen refresh 
 
    }; 
 
    } 
 
} 
 

 
})();

body { 
 
    margin-left: -10vw; 
 
    margin-top: -30vh; 
 
    background: url(https://i-d-images.vice.com/images/articles/meta/2014/10/21/untitled-article-1413860640.jpg?crop=1xw:0.44513137557959814xh;0xw,0.14219474497681608xh&resize=2000:*&output-format=image/jpeg&output-quality=75) no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
} 
 

 
#canvas { 
 
    z-index: -1; 
 
    top: 2vh; 
 
    left: -10vw; 
 
    width: 110vw; 
 
    height: 130vh; 
 
    overflow: hidden; 
 
}

<div id="back"></div> 
 
<div id="canvas"></div>

와