如何正确清除旋转的HTML5 canvas上下文？

我需要清除一个旋转的矩形并在画布上再次绘制它，或者在相同的地方或其他地方。问题是，清除的部分与矩形的边界不匹配，将脏位留下。如何正确清除旋转的HTML5 canvas上下文？

var cvs = document.getElementById('testcanvas'); 
var ctx = cvs.getContext('2d'); 

var rectColor = 'green'; 
var x = 300; 
var y = 10; 
var width = 200; 
var height = 150; 
var rotation = 0; 
setInterval(animate, 100); 

function animate(){ 
    clearRect(); 
    update(); 
    drawRect();  
} 

function clearRect(){ 
    ctx.save(); 
    ctx.rotate(rotation); 
    ctx.clearRect(x, y, width, height); 
    ctx.restore(); 
} 

function update(){ 
    rotation += 0.1; 
    x++; 
} 

function drawRect(){ 
    ctx.save(); 
    ctx.fillStyle = rectColor; 
    ctx.rotate(rotation); 
    ctx.fillRect(x, y, width, height); 
    ctx.restore();   
}

http://jsfiddle.net/MFz2z/15/

另一个问题，clearRect（）在Firefox的行为不同，当画布旋转时，通过清除由旋转的矩形使用全未旋转的空间。
http://jsfiddle.net/MFz2z/17/

除了清除整个画布并再次绘制所有内容之外，是否有任何解决方法？我使用Chrome 22和Firefox 15.0.1。

来源

2012-10-01 Crogo

这是一个反别名的问题，但不能关闭它，请参阅[this]（http://stackoverflow.com/q/195262/757095） –

这可能是由于创建额外花絮的像素的抗锯齿造成的。

你可以使用这个http://jsfiddle.net/MFz2z/28/基本上从每边清除1个像素。

来源

2012-10-01 19:51:53 Sev

这可能是我需要的，尽管Firefox clearRect区别仍然让我困惑。在接受之前要做一些测试！ – Crogo

如何正确清除旋转的HTML5 canvas上下文？

回答

相关问题