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);
}
}
解决方案
您可以做的是更改当前画布元素的坐标。
clear()
请在function的函数中设置canvas变量redraw()
。
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);
}
推荐阅读
- powershell - 如何制作导入 csv、搜索特定短语然后导出结果的 Powershell 脚本?
- php - 在 Twig/Timber 的搜索结果中突出显示搜索词
- java - 只接受 2 作为数字并给出奇数或偶数的错误输出
- python - Django - 检查实例是否存在导致内部服务器错误 500
- android - 显示 downloadUrl 可能尚未初始化的错误
- mongodb - MongoDB 聚合匹配结果的计数
- android - 更新到 AGP 3.2.0 后,BuildConfig.VersionCode 不反映实际的 versionCode
- python - 在从 .bat 文件启动 Maya 时运行外部 Python 脚本
- f# - 在函数上定义重载运算符
- angular2-routing - 我错过了什么,所以我可以在 Nativescript 上使用路由器?