Javascript 视频上的画布覆盖

所以我必须根据给定的坐标在视频上画多个矩形。问题是我必须每秒在不同的坐标处画出它们，清除它们过去的位置

        function draw() {
            var time = $(".video-detect")[0].duration;
            var i = 0;
            for (let k = 0; k < time; k++) {// every second
                setTimeout(function () {
                    var objArray = [{}];
                    for (; i < facesObject.length; i++) {
                        var x = facesObject[i].Frame_idx[k].Coordinates[0],
                            y = facesObject[i].Frame_idx[k].Coordinates[1],
                            width = facesObject[i].Frame_idx[k].Coordinates[2] - facesObject[i].Frame_idx[k].Coordinates[0],
                            height = facesObject[i].Frame_idx[k].Coordinates[3] - facesObject[i].Frame_idx[k].Coordinates[1];


                 // and here I have to draw the rectangle 
                 // I don't know how to clear the previous rectangles

                      }
                    }
                    console.log(k);
                }, k * 1000);
            }
        }

函数绘图（）{
var time=$（“.video detect”）[0]。持续时间；
var i=0；
对于（设k=0；k

您可以做的是更改当前画布元素的坐标

请在

redraw（）

函数的

clear（）

函数中设置画布变量。

function draw() {
    var time = $(".video-detect")[0].duration;
    var i = 0;

    for (let k = 0; k < time; k++) {// every second
        setTimeout(function () {

            var objArray = [{}];

            for (var i = 0; i < facesObject.length; i++) {
                var x = facesObject[i].Frame_idx[k].Coordinates[0],
                    y = facesObject[i].Frame_idx[k].Coordinates[1],
                    width = facesObject[i].Frame_idx[k].Coordinates[2] - facesObject[i].Frame_idx[k].Coordinates[0],
                    height = facesObject[i].Frame_idx[k].Coordinates[3] - facesObject[i].Frame_idx[k].Coordinates[1];

                redraw(x, y, width, height);
            }
        }

        console.log(k);

    }, (k * 1000);
}

/**
 * Redraws the canvas element at a new position.
 * 
 * @param: {string} x
 * @param: {string} y
 * @param: {string} with
 * @param: {string} height
 */
function redraw(x, y,, width, height) {
    // Clears the canvas element.
    clear(canvas); // PUT YOU CANVAS ELEMENT VARIABLE HERE.
    // Sets the fill style.
    draw.fillStyle = 'rgba(255,255,255,1)';
    // Draw the element with new coordinates.
    draw.fillRect(x, y, width, height);
}

/**
 * Clears an element from the canvas.
 * 
 * @param: {object} c - The canvas element.
 */
function clear(c) {
    c.clearRect(0, 0, WIDTH, HEIGHT);
}

函数绘图（）{
var time=$（“.video detect”）[0]。持续时间；
var i=0；
对于（设k=0；k

我是否正确回答了您的问题？如果是，您能否将答案标记为已接受？