使用canvas中的touchmove事件繪製時獲取最後一幅圖像？

Question

我在畫布上繪製圖像並將ontouchmove事件繪製成圖像。我正面臨的問題是當圖像在畫布中移動時，圖像的多個實例正在繪製哪個根據功能是正確的，但我只想要最後一個實例？

var x1 = 0; 
    var x2 = 0; 
    var y1 = 0; 
    var y2 = 0; 
    var imagesLoaded = 0; 
    var img = ''; 
    var img1 = ''; 
    var img2 = ''; 
    var img3 = ''; 
    var img4 = ''; 
    var img5 = ''; 
    var img6 = ''; 
    var context = ''; 
    var canvas; 
    function initImg() { 
    canvas = document.getElementById('final'); 
    context = canvas.getContext('2d'); 
    img = loadImage('images/img01_res.jpg', main); 
    img1 = loadImage('images/color_animation_img01.png', main); 
    img2 = loadImage('images/color_animation_img02.png', main); 
    img3 = loadImage('images/color_animation_img03.png', main); 
    img4 = loadImage('images/color_animation_img04.png', main); 
    img5 = loadImage('images/color_animation_img05.png', main); 
    img6 = loadImage('images/color_animation_img06.png', main); 
    img7 = loadImage(hidden, main); 

    function main() { 
     imagesLoaded += 1; 
     if (imagesLoaded == 8) { 
      context.drawImage(img, 0, 0); 
      context.drawImage(img1, 22, 0); 
      context.drawImage(img2, 68, 0); 
      context.drawImage(img3, 114, 0); 
      context.drawImage(img4, 160, 0); 
      context.drawImage(img5, 207, 0); 
      context.drawImage(img6, 253, 0); 
      context.drawImage(img7, 48, 72); 
      var d = canvas.toDataURL("image/png"); 
     } 
    } 
} 

    var x1 = 0; 
    var x2 = 0; 
    var y1 = 0; 
    var y2 = 0; 
    var imagesLoaded = 0; 
    var img = ''; 
    var img1 = ''; 
    var img2 = ''; 
    var img3 = ''; 
    var img4 = ''; 
    var img5 = ''; 
    var img6 = ''; 
    var context = ''; 
    var canvas; 
    function initImg() { 
    canvas = document.getElementById('final'); 
    context = canvas.getContext('2d'); 
    img = loadImage('images/img01_res.jpg', main); 
    img1 = loadImage('images/color_animation_img01.png', main); 
    img2 = loadImage('images/color_animation_img02.png', main); 
    img3 = loadImage('images/color_animation_img03.png', main); 
    img4 = loadImage('images/color_animation_img04.png', main); 
    img5 = loadImage('images/color_animation_img05.png', main); 
    img6 = loadImage('images/color_animation_img06.png', main); 
    img7 = loadImage(hidden, main); 

    function main() { 
     imagesLoaded += 1; 
     if (imagesLoaded == 8) { 
      context.drawImage(img, 0, 0); 
      context.drawImage(img1, 22, 0); 
      context.drawImage(img2, 68, 0); 
      context.drawImage(img3, 114, 0); 
      context.drawImage(img4, 160, 0); 
      context.drawImage(img5, 207, 0); 
      context.drawImage(img6, 253, 0); 
      context.drawImage(img7, 48, 72); 
      var d = canvas.toDataURL("image/png"); 
     } 
    } 
} 


function loadImage(src, onload) { 
    var img = new Image(); 

    img.onload = onload; 
    img.src = src; 

    return img; 
} 
function onTouchstart(id, event) { 
    try { 
     x1 = event.touches[0].pageX; 
     y1 = event.touches[0].pageY; 
    } 
    catch (error) { 
     try { 
      x1 = event.clientX; 
      y1 = event.clientY; 
     } 
     catch (ex) { 
     } 
    } 
    try { 
     event.preventDefault(); 
    } 
    catch (e) { 
    } 
    } 
    function onTouchmove(id, event) { 
    try { 
     x2 = event.touches[0].pageX; 
     y2 = event.touches[0].pageY; 
    } 
    catch (error) { 
     try { 
      x2 = event.clientX; 
      y2 = event.clientY; 
     } 
     catch (ex) { 
     } 
    } 
    try { 
     event.preventDefault(); 
    } 
    catch (e) { 
    } 
    context.drawImage(img1, x2, y2); 
} 


function loadImage(src, onload) { 
    var img = new Image(); 

    img.onload = onload; 
    img.src = src; 

    return img; 
} 
function onTouchstart(id, event) { 
    try { 
     x1 = event.touches[0].pageX; 
     y1 = event.touches[0].pageY; 
    } 
    catch (error) { 
     try { 
      x1 = event.clientX; 
      y1 = event.clientY; 
     } 
     catch (ex) { 
     } 
    } 
    try { 
     event.preventDefault(); 
    } 
    catch (e) { 
    } 
} 
function onTouchmove(id, event) { 
    try { 
     x2 = event.touches[0].pageX; 
     y2 = event.touches[0].pageY; 
    } 
    catch (error) { 
     try { 
      x2 = event.clientX; 
      y2 = event.clientY; 
     } 
     catch (ex) { 
     } 
    } 
    try { 
     event.preventDefault(); 
    } 
    catch (e) { 
    } 
    context.drawImage(img1, x2, y2); 
} 

Answer 1

使用ClearRect財產。

var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var clear=context.clearRect(0, 0,width,height); 
    var save=context.save(); 

    clear; 
    //Your drawing code 
    save; 

帆布畫，並重繪以非常快的速度和那是什麼造成animation.Since你不清除你的畫布，然後保存它，你就會得到一系列的圖像在一個單一的框架，那是什麼困擾you.Try這在你的代碼中，讓我知道它是否有效。