html - 清除 HTML5 Canvas 上的 strokeRect()

Question

我可以在我的 Canvas 上完美地绘制一个带边框的正方形。但是，当我尝试使用 clearRect() 函数清除这个带边框的方形时，一些笔画没有被清除。

HTML

<div>
    <canvas width="300" height="250">
    </canvas>
</div>

JS

var $context = $('canvas')[0].getContext('2d');

// Create 4 filled squares
$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);

// Create borders around them
$context.strokeRect(120, 0, 30, 30);
$context.strokeRect(120, 30, 30, 30);
$context.strokeRect(150, 0, 30, 30);
$context.strokeRect(150, 30, 30, 30);

// Now erase the squares (individually)
$context.clearRect(120, 0, 30, 30);
$context.clearRect(120, 30, 30, 30);
$context.clearRect(150, 0, 30, 30);
$context.clearRect(150, 30, 30, 30);

参见 jsFiddle here .

仔细查看后，似乎 clearRect() 函数实际上并没有从我的 strokeRect() 调用中清除笔划。所以我在想，也许我需要做的只是用 'white' 的 strokeStyle 描边。然而，当我这样做时(new fiddle here)，它似乎画了一个白色笔划，但只有 alpha 值为 128!我的 globalAlpha 设置为 1…这不应该是完全不透明的吗？

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

请注意，我不能简单地清除 Canvas ，而必须一次清除一个方 block 。

提前致谢!

Answer 1

一切正常。通过 strokeRect 的边框将高度和宽度添加到等于 lineWidth 的形状。 clearRect 不是一个奇特的功能，它就像橡皮擦一样工作 - 仅从您指定的区域删除“绘画”。

在您的示例中，lineWidth 默认为 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 坐标，并增加透明区域的大小以覆盖边界和形状本身。

jsfiddle:http://jsfiddle.net/fg6fmjhb/2/