javascript - 如何从画布上删除前一帧的矩形？

Question

我试图在画布和矩形坐标中绘制一个矩形，我从 JSON 文件中获得。

它绘制成功，但没有删除前一个矩形。

我尝试使用 context.beginPath()、context.clearRect() 但它们都不起作用。

HTML 代码：

var canvasfabric = new fabric.Canvas('layer2');
  layer1 = document.getElementById("layer1");
  ctx1 = layer1.getContext("2d");
  layer2 = document.getElementById("layer2");
  ctx2 = layer2.getContext("2d");
  layer3 = document.getElementById("layer3");
  ctx3 = layer3.getContext("2d");

    function box(j,a){
                    ctx1.beginPath();
                    ctx1.font = "bold 15px Verdana";
                    ctx1.lineWidth = "5";
                    ctx1.strokeStyle = "red";
                    ctx1.fillstyle = "#6af547";
                    var k = a;

                    if (myVideo.paused == false){

                            if(k <= data[j].Total_objects_detected){
                                var x1 = data[j].output[k].x_val;
                                var y1 = data[j].output[k].y_val;
                                var width1 = data[j].output[k].width;
                                var height1 = data[j].output[k].height;

                                var rect = new fabric.Rect({width: width1, height: height1, fill: '#ffffff00', stroke: 'rgba(34,177,76,5)', strokeWidth: 5, top: y1, left: x1});
                                canvasfabric.add(rect);

                                ctx1.fillText(data[j].output[k].Objects_classname, x1 + 5, y1 - 10);
                                k++;

                            }    
                    }
                   ctx1.stroke();
                   ctx1.beginPath();
                }

这里 j = frame-number , a = 多少个矩形 (0-10)

如果您想要任何进一步的代码部分或任何查询，请告诉我。

标签： javascripthtml