0

我在脚本中有一个在画布上绘制矩形的函数。我想清理在“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);
}
4

2 回答 2

0

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

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

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

于 2013-03-09T12:12:21.740 回答
0

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

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);

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

于 2013-03-09T12:14:20.083 回答