1

回転した四角形をクリアして、キャンバス上の同じ場所または別の場所に再度描画する必要があります。問題は、クリアされた部分が四角形の境界と一致せず、汚れた部分が残ることです。 

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/

もう 1 つの問題として、キャンバスが回転すると、Firefox での clearRect() の動作が異なります。これは、回転された四角形によって使用される回転されていないスペース全体をクリアすることによって行われます。
http://jsfiddle.net/MFz2z/17/

キャンバス全体をクリアしてすべてを再度描画する以外に、これに対する回避策はありますか? Chrome 22 と Firefox 15.0.1 を使用しています。

4

1 に答える 1

2

これは、余分な情報を作成するピクセルのアンチエイリアシングが原因である可能性があります。

このhttp://jsfiddle.net/MFz2z/28/を使用して、基本的に両側からさらに 1 ピクセルをクリアできます。

于 2012-10-01T19:51:53.147 に答える