javascript - 我无法完全清除 中变换后的矩形

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

我将透明矩形向上移动 1 像素并增加 2 像素宽度以清除剩余边框。

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

Answer 1

我也遇到过这种情况。这是由应用于初始形状的抗锯齿引起的。它适用于不使用抗锯齿功能的形状，例如当您不变换 Canvas 时的矩形。我找到的唯一解决方案是调用形状稍高(每边约 1-2 像素)的 clearRectangle。