Question

此代码无法完全清除canvas元素中的变换矩形。我怎么能完全清楚？

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个像素）。

我无法在<canvas> </canvas>中完全清除变换后的矩形

1 个答案: