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 here。

仔细观察后，似乎clearRect()函数实际上并未清除strokeRect()调用中的笔画。所以我在想，也许我需要做的只是用strokeStyle ‘white’来描边。然而，当我这样做时（新的小提琴here），它似乎描绘了一个白色笔画，但只有alpha值为128！我的globalAlpha设置为1 ......这不应该是完全不透明的吗？

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

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

提前致谢！

Answer 1

事情正常。通过strokeRect的边框将高度和宽度添加到等于lineWidth的形状。 clearRect不是一个奇特的功能，它只是像橡皮擦一样 - 去除＆＃34;画＆＃34;仅来自您指定的区域。

在您的示例中，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/

Answer 2

你也可以这样做：

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

这将完全清除画布上下文。

Answer 3

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>

清除HTML5 Canvas上的strokeRect（）

3 个答案: