清洁矩形

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是“无国籍的”，因为它不知道已经绘制的基元或已经进行的调用。因此，不可能仅撤消某个绘图调用。如果需要修改图形，则需要重新绘制所有不想更改的项目。当然，您可以选择更改单个像素，因此如果您的文本是黑色且矩形是红色，则可以替换所有红色像素，但如果启用了抗锯齿并且完全复杂，这将无法正常工作。

因此要么重绘整个区域（省略矩形图形但渲染文本）。或者考虑在彼此之上使用2个画布（一个有文字，一个有背景），当然你可以重新渲染背景而不必担心文字。

最后但并非最不重要的是，使用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);

但是我认为你的代码可以通过使用更多变量（因此也是最通用的函数）来改进。