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

Question

我需要清除一个旋转的矩形并在画布上再次绘制它，无论是在同一个地方还是在其他地方。 问题是，清除的部分与矩形的边界不匹配，留下脏位。

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。

Answer 1

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

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