Javascript 为什么最后一个矩形没有删除？

我想选择窗口桌面，如下图所示，然后使用我的

canvas

code

我是画布上的新手，我假设使用

requestAnimationFrame

绘制图像将与

clearRect（）

相同，从而消除先前绘制的矩形

我的问题是，前面所有的矩形都没有被删除，如何才能做到这一点

我的代码：

window.addEventListener（“加载”，_init）；
函数_init（w=窗口，d=文档）{
var canvas=d.getElementsByTagName（“画布”）[0]，
ctx=canvas.getContext（“2d”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var cW=画布宽度，
cH=画布高度，
flag=0，
obj={
initX:null，
空值：，
curX:null，
curY:null
};
canvas.addEventListener（“mousedown”，e=>{
flag=1；
obj.initX=e.clientX；
obj.initY=e.clientY；
});
canvas.addEventListener（“mouseup”，e=>{
log（“Mouseup！”）；
flag=0；
});
canvas.addEventListener（“mousemove”，e=>{
如果（标志===1）{
flag=2；
}
如果（标志===2）{
obj.curX=e.clientX；
obj.curY=e.clientY；
}
});
函数场景（）{
牵引杆接地（）；
如果（标志===2）绘制矩形（obj）；
请求动画帧（场景）；
}
功能缺陷背景（）{
var image=新图像（）；
image.src=”http://wallpaperswide.com/download/background_logon_default_windows_7-wallpaper-1920x1200.jpg";
image.onload=\u=>{
ctx.drawImage（图像，0，0，cW，cH）；
};
}
函数drawRectangle（数据）{
ctx.save（）；
ctx.strokeStyle=“rgba（48242,62,0.75）”；
ctx.moveTo（data.initX，data.initY）；
ctx.lineTo（data.curX，data.initY）；
ctx.lineTo（data.curX，data.curY）；
ctx.lineTo（data.initX，data.curY）；
ctx.lineTo（data.initX，data.initY）；
ctx.stroke（）；
ctx.restore（）；
}
请求动画帧（场景）；
}

方形发生器
正文，html{
填充：0；边框：0；边距：0；顶部：0；左侧：0；溢出：隐藏；
}

您需要调用该函数

Canvas 2D API的CanvasRenderingContext2D.beginPath（）方法通过清空子路径列表来启动新路径。如果要创建新路径，请调用此方法

window.addEventListener（“加载”，_init）；
函数_init（w=窗口，d=文档）{
var canvas=d.getElementsByTagName（“画布”）[0]，
ctx=canvas.getContext（“2d”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
var cW=画布宽度，
cH=画布高度，
flag=0，
obj={
initX:null，
空值：，
curX:null，
curY:null
};
canvas.addEventListener（“mousedown”，e=>{
flag=1；
obj.initX=e.clientX；
obj.initY=e.clientY；
});
canvas.addEventListener（“mouseup”，e=>{
flag=0；
});
canvas.addEventListener（“mousemove”，e=>{
如果（标志===1）{
flag=2；
}
如果（标志===2）{
obj.curX=e.clientX；
obj.curY=e.clientY；
}
});
函数场景（）{
牵引杆接地（）；
如果（标志===2）绘制矩形（obj）；
请求动画帧（场景）；
}
功能缺陷背景（）{
var image=新图像（）；
image.src=”http://wallpaperswide.com/download/background_logon_default_windows_7-wallpaper-1920x1200.jpg";
image.onload=\u=>{
ctx.drawImage（图像，0，0，cW，cH）；
};
}
函数drawRectangle（数据）{
ctx.beginPath（）；
ctx.strokeStyle=“rgba（48242,62,0.75）”；
ctx.moveTo（data.initX，data.initY）；
ctx.lineTo（data.curX，data.initY）；
ctx.lineTo（data.curX，data.curY）；
ctx.lineTo（data.initX，data.curY）；
ctx.lineTo（data.initX，data.initY）；
ctx.stroke（）；
ctx.restore（）；
}
请求动画帧（场景）；
}

方形发生器
身体，
html{
填充：0；
边界：0；
保证金：0；
排名：0；
左：0；
溢出：隐藏；
}

//Call that function within your `drawRectangle`logic
function drawRectangle(data) {
    ctx.beginPath();
    ctx.strokeStyle = "rgba(48, 242, 62, 0.75)";
    ....
}