清除HTML5 Canvas上的strokeRect()

Question

我可以在画布上绘制一个带边框的正方形.但是,当我尝试使用该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 .

仔细观察之后,似乎该clearRect()功能实际上并没有从我的strokeRect()通话中清除中风.所以我想,也许我需要做的仅仅是一个边境行程strokeStyle的‘white’.然而,当我这样做时(这里是一个新的小提琴),它似乎描绘了一个白色笔画,但只有alpha值为128!我globalAlpha的设置为1 ...这不应该是完全不透明的吗？

我在这里不理解什么？是否clearRect()不明确调用strokeRect()？如果没有,解决方案是否应该覆盖现有的strokeRect()但具有白色的颜色？

请注意,我不能简单地清除画布,但必须一次清除一个方格.

提前致谢!

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/