视频上的画布覆盖答案

【问题标题】：Canvas overlay on video视频上的画布覆盖
【发布时间】：2019-11-20 07:58:08
【问题描述】：

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

        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);
            }
        }

【问题讨论】：

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

标签： javascript canvas video settimeout

【解决方案1】：

你可以做的是改变当前画布元素的坐标。

请在redraw()函数的clear()函数中设置canvas变量。

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);
}

【讨论】：