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 に答える