1

此代码无法完全清除画布元素中转换后的矩形。我怎样才能完全清除？

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 宽以清除剩余的边框。

这段代码运行良好。但这是短期解决方案！

4

1 回答 1

1

我也遇到过这种情况。这是由应用于初始形状的抗锯齿引起的。它适用于不使用抗锯齿的形状，例如不变换画布时的矩形。我发现的唯一解决方案是clearRectangle使用稍高的形状（每边约 1-2 个像素）调用。

于 2012-11-04T19:34:22.747 回答