在HTML5画布上清除strokeRect（）

我可以在画布上画一个有边框的正方形，画得非常好。但是，当我尝试使用

clearRect（）

函数清除带有边框形状的正方形时，某些笔划不会被清除

HTML

请参阅jsFiddle

仔细查看后，似乎

clearRect（）

函数实际上没有从我的

strokeRect（）调用中清除笔划。所以我在想，也许我需要做的只是用
的strokeStyle
的
'white'
笔划边框。然而，当我这样做（新小提琴），它似乎画了一个白色的笔划，但只有一个阿尔法值128！我的
globalAlpha
设置为1…这不应该是完全不透明的吗

我在这里不明白什么？
clearRect（）
是否未清除对
StrokRect（）的调用？如果不是，解决方案是否应该在现有的
strokeRect（）
上划过，但颜色为白色

请注意，我不能简单地清理画布，但必须一次清理一个正方形

提前谢谢
 一切正常。通过
strokeRect添加边框
将高度和宽度添加到与
线宽
相等的形状
clearRect
不是一个奇特的功能，它就像一个橡皮擦一样工作——只从指定的区域移除“油漆”

在您的示例中，
线宽
是默认值1。您的代码绘制30x30的矩形，然后通过宽度为1的笔划应用边框。生成的形状为32x32-由1+30+1生成

为了弄清楚这一切，你必须稍微调整一下你的数学：

$context.clearRect(119, -1, 32, 32);
$context.clearRect(119, 29, 32, 32);
$context.clearRect(149, -1, 32, 32);
$context.clearRect(149, 29, 32, 32);

这将移动一个x和一个y坐标，并增加清除的大小以覆盖边界和形状本身

jsIDLE:
您也可以这样做：

$context.clearRect(0, 0, canvas.width, canvas.height);

这将完全清除画布上下文。
clearReact对我不起作用，因为我在绘制线条之前忘记使用beginPath。
使用：
context.beginPath（）

这样做可以：


var$context=$（'canvas'）[0].getContext（'2d'）；
$context.fillStyle='pink'；
$context.fillRect（120,0,30,30）；
$context.fillRect（120,30,30,30）；
$context.fillRect（150,0,30,30）；
$context.fillRect（150,30,30,30）；
//添加以下内容：
$context.beginPath（）；
$context.strokeRect（120,0,30,30）；
$context.strokeRect（120,30,30,30）；
$context.strokeRect（150,0,30,30）；
$context.strokeRect（150,30,30,30）；
$（'.erase'）。在（'click'，function（）上{
//现在把一切都抹掉
$context.clearRect（0,0，$（'canvas'）[0]。宽度，$（'canvas'）[0]。高度）；
});

尝试清除
clearRect（）
可以正常工作。绘制斯托克斯曲线时，其宽度为。它的内外两面都被画上了。您只需要扩展
clearRect
。还要注意的是，
stroke
有一些alpha值。@SpencerWieczorek-不确定如何“扩展”
clearRect（）
函数。在调用
clearRect（）
之前，我尝试将
lineWidth
设置为2，而不是默认值1，但这并没有多大作用。您将如何具体设置清除矩形的外侧和内侧？让
clearRect（）
在每个方向上再覆盖一个像素。例如，除了清除一个
30x30
区域，清除
32x32
。当他说“扩展”时，@SpencerWieczorek的意思是
clearRect（120-2，0-2，30+4，30+4）
。顺便说一句，html画布工作流通常会清除画布并重新绘制所有所需的形状，而不是试图删除现有的图形。正如您所发现的，canvas使擦除变得非常复杂。关键是“记住”形状的定义，以便可以重新绘制它们——通常在javascript对象中。干杯明白了…谢谢你的快速回复！
$context.clearRect(119, -1, 32, 32);
$context.clearRect(119, 29, 32, 32);
$context.clearRect(149, -1, 32, 32);
$context.clearRect(149, 29, 32, 32);

$context.clearRect(0, 0, canvas.width, canvas.height);