問題動畫剪輯區域

當我試圖完成類似於您可能會在卡通雜燴（example link），其中形狀作爲屏蔽層的質地下面部分保持靜態看到效果清除畫布。我開始玩弄這個想法通過創建一個渲染循環，清除畫布，將其保存的狀態，然後繪製一個矩形裁剪區域，然後繪製背景紋理佔據畫布的整個寬度和高度。問題動畫剪輯區域

這裏的繪製函數：

function draw() 
{ 
    context.clearRect(0,0, 640, 480); 
    context.save(); 
    x += velocityX; 
    y += velocityY; 
    context.rect(x, y, 40, 40); 
    context.clip(); 
    context.drawImage(image, 0,0, 640, 480); 
    context.restore(); 
}

基本上它只是運行在每秒60幀，更新所述矩形的位置和剪切剪切區域內的背景圖像。（我知道代碼的結構並不完美，但我只是試着看看這種效果是否可以在畫布上實現）。

http://jsfiddle.net/JERje/86/

我似乎遇到的問題是，從循環的前一次迭代的剪裁區域徘徊創建您在上面的小提琴看到怪異的效果。我試圖重新排序的draw()步循環的一切，但似乎工作的唯一的事情是canvas.width = canvas.width伎倆清除屏幕。我想，以避免清屏的這種方法，因爲它似乎並不在IE工作，而且也破壞了帆布state。 clearRect()應該可以清除屏幕。我究竟做錯了什麼？

來源

2013-02-22 Jeremy Simms

視頻不可用。 – Niels 2013-02-22 16:50:31

對不起，更新了http://youtu.be/EDcICGLpybQ?t=29s的鏈接，對我來說工作正常 – 2013-02-22 16:53:36

也沒有提供，不說明爲什麼。只是不可用。 – Niels 2013-02-22 16:55:26

所以，覺得這很愚蠢，但顯然當你打電話給rect()時，你也必須請務必致電closePath以關閉裁剪區域。很高興我終於明白了，現在來添加多個圖層！

這裏是工作小提琴：http://jsfiddle.net/JERje/129/

來源

2013-03-05 17:24:16

呃是的，我似乎記得這樣做，然後忘記發佈在這裏。很高興你想出來了。現在您應該認識到，清除畫布的'width = width'方法不是必需的，因爲其他方法將再次運行。 – 2013-04-22 00:55:51

僅供參考'closePath'不是解決方案，它是修復您的問題的'beginPath'。'beginPath'重置路徑，以便在繪製之前刪除先前的路徑條目。無論如何，當你使用'rect'時，'closePath'什麼也不做，它總是會產生一個封閉的路徑。 – Prestaul 2015-01-23 07:08:07

您使用的是相同的HTML5畫布平裝我是不是你。

如果設置了即席油畫像我一樣對你的jsfiddle像這樣：

var newCanvas = document.createElement('canvas'); 
newCanvas.getContext("2d").drawImage(image,0,0);

這樣的功能，因爲這將能夠破解一個部分的是帆布：

context.putImageData(newCanvas.getContext("2d").getImageData(x,y,40,40),x,y);

因此給你的雜燴效應。好男人，祝你好運。 PST我，如果它不工作

編輯：但是這種解決方案會忽略一些背景縮放轉換。只需聰明一點，你自己如何處理規模（如果你想要真正的「雜燴」效果，你真的應該是這樣）

來源

2013-02-23 11:31:42

感謝您的想法，但不幸的是，這是行不通的，和以前一樣的問題。 – 2013-03-05 16:59:13

問題動畫剪輯區域

回答

相關問題