我無法完全清除<canvas>中的轉換矩形

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