清除 HTML5 Canvas 上的 strokeRect()答案

【问题标题】：Clearing a strokeRect() on HTML5 Canvas清除 HTML5 Canvas 上的 strokeRect()
【发布时间】：2014-10-03 03:51:24
【问题描述】：

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

HTML

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

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() 调用中清除笔画。所以我在想，也许我需要做的只是用strokeStyle 的‘white’ 描边边框。然而，当我这样做时（新小提琴here），看起来这画了一个白色的笔触，但只有一个 128 的 alpha 值！我的globalAlpha 设置为 1……这不应该完全不透明吗？

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

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

提前致谢！

【问题讨论】：

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

标签： html canvas stroke

【解决方案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/

【讨论】：

【解决方案2】：

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

// add this:
$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').on('click', function() {
    // Now erase everything
    $context.clearRect(0,0,$('canvas')[0].width, $('canvas')[0].height);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
    <canvas width="300" height="250"></canvas>
</div>
<button class="erase">Attempt to Clear</button>

【讨论】：

【解决方案3】：

你也可以这样做：

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

这将彻底清除画布上下文。

【讨论】：