Javascript 在画布中使用touchmove事件绘制时获取最后一幅图像？

我正在画布上绘制图像，并向绘制的图像提供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);
}

---

使用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;

---

画布以非常快的速度绘制和重画，这就是创建动画的原因。因为您没有清除画布然后保存它，所以在单个帧中可以获得一系列图像，这正是困扰您的地方。请在您的代码中尝试一下，让我知道它是否有效。

@Rayon Dabre:请将您的代码放入问题中，以便我能找到确切的问题。@jj先生，我在这里提供了我的代码。请审查并为我提供解决方案。谢谢。@Rayon Dabre:您尝试过前面提供的解决方案了吗？对不起，但是这段代码不起作用，没有理由在这个um中使用save。。上下文。@RayonDabre:你到底想达到什么目的？要更详细一些，这样人们才能想出更准确的解决方案。为什么不准备一个基本的代码呢？