簡體   English   中英

如何正確清除旋轉的 HTML5 畫布上下文?

[英]How to properly clear a rotated HTML5 canvas context?

我需要清除一個旋轉的矩形並在畫布上再次繪制它,無論是在同一個地方還是在其他地方。 問題是,清除的部分與矩形的邊界不匹配,留下臟位。

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。

這可能是由於像素的抗鋸齒造成了額外的花絮。

你可以使用這個http://jsfiddle.net/MFz2z/28/並且基本上從每側清除 1 個像素。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM