我无法完全清除< canvas>中的已转换矩形， [英] I can't completely clear the transformed rectangle in <canvas>

问题描述

此代码无法完全清除canvas元素中的已转换矩形。
如何完全清除？

This code can't completely clear the transformed rectangle in canvas element. How can i completely clear?

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

我可以通过以下代码清除已转换的矩形

I can clear transformed rectangle by following code

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

I move up clear rectangle to top 1px and increase 2px wide to clear remaining border.

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

This code works well. But it is short term solution!

推荐答案

我也遇到了这个问题。这是由施加到初始形状的抗混叠引起的。它适用于不使用反锯齿的形状，例如当您不转换画布时的矩形。
我发现的唯一解决方案是调用 clearRectangle ，形状略高（每边约1-2个像素）。

I encountered this as well. This is caused by the anti-aliasing which is applied to the initial shape. It works with shapes which do not use anti-aliasing, such as rectangles when you don't transform your canvas. The only solution I found is to call clearRectangle with a shape that is slightly taller (about 1-2 pixels each side).

这篇关于我无法完全清除< canvas>中的已转换矩形，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！