我不能完全清除转化矩形(I can't completely clear the trans

该代码不能完全清除画布元件转化的矩形。 我怎么能彻底清除？

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

context.transform(1, 0.5, 0, 1, canvas.width / 2 , canvas.height);
context.fillStyle = 'red';
context.fillRect(20, 20, 200, 100);
context.clearRect(20, 20, 200, 100);

我可以通过下面的代码清除转化矩形

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var x = 20;
var y = 20;
var width = 200;
var height = 100;

context.transform(1, 0.5, 0, 1, canvas.width / 2 , canvas.height / 2);
context.fillStyle = 'red';
context.fillRect(x, y, width, height);
context.clearRect(x, y - 1, width, height + 2);

我拉升明确长方形顶部1px的，增加的2px宽以清除剩余的边界。

此代码工作得很好。 但它是短期的解决办法！

Answer 1:

我遇到了这一点。 这是通过被施加到初始形状的抗混叠引起的。 它的工作原理与形状不使用抗锯齿，比如当你不改变你的画布矩形。 我发现的唯一的解决方法是调用clearRectangle其形状是略微更高（约1-2个像素的每个侧）。

文章来源: I can't completely clear the transformed rectangle in