Question

我正在画布onload上绘制图像并将 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;

Canvas以非常快的速度绘制和重绘，这就是创建动画的原因。既然你没有清理你的画布然后保存它，你就会在一个帧中得到一系列图像，这就是你遇到什么麻烦。在你的代码中试试这个并告诉我它是否有效。

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

1 个答案: