清洗矩形

Question

我在脚本中有一个在画布上绘制矩形的函数，我想清除在"if“条件下绘制的矩形。我在画布上也有文本(它的坐标是0,80)，它不应该被清除。只有矩形必须清洗。

function red_stroke_2(yy) 
{ 
    //Red color edges
    context.strokeStyle = "#f00";
    context.strokeRect(0,yy,800,40);
}
 if (Option1==answers[qnumber])
{
     red_stroke_2(80);
}

Answer 1

Canvas是“无状态的”，因为它不知道已绘制的原语或已进行的调用。因此，不可能只撤消某个绘图调用。如果需要修改绘图，则需要重绘不想更改的所有项目。当然，你可以选择改变单个像素，所以如果你的文本是黑色的，而矩形是红色的，你可以替换所有的红色像素，但如果启用了抗锯齿功能，而且非常复杂，这就不会那么好用了。

因此，要么重新绘制整个区域(省略矩形绘制，但渲染文本)。或者考虑使用两个画布叠加在一起(一个是文本，一个是背景)，那么你当然可以重新渲染背景，而不必担心文本。

最后但并非最不重要的是，使用SVG也可能是一种选择，因为它是有状态的，由DOM元素组成，您可以修改/插入/删除这些元素，浏览器将进行合成。在这种情况下，您将拥有一个rect元素和一个text元素，您可以简单地删除前者。

Answer 2

这将放置透明像素而不是矩形：

function clean_red_stroke(yy)
{
    context.clearRect(0,yy,800,40);
}
//Call it with the same 'yy' you used in the drawing method
clean_red_stroke(80);

然而，我认为你的代码可以通过使用更多的变量(因此是一个最通用的函数)来改进。