如何使圖像失真的創建使用HTML5畫布

Question

給定一個圖像中的風效果揮旗，我需要創建圖像的動畫被扭曲，就好像它是一個旗幟在風中飄動，使用JavaScript和HTML5畫布。

獎勵：我也希望能夠將此動畫導出爲PNG。

Answer 1

我創建了一個旗幟在風中飄動的simple example。這很醜陋，因爲我畫了國旗來填充畫布（而不是留下用於填充標誌的填充），因爲我沒有嘗試進行反走樣。 我也沒有做任何嘗試提供3D陰影，這將有助於效果。

我可以得到一個320像素寬的標誌在Chrome V8我的機器上64fps。如果要自己測試速度，請將第59行上的fps更改爲1000，並取消第63和82行的註釋;它會每隔100幀向控制檯輸出fps信息。

這不會IE8-工作，即使有ExCanvas，因爲沒有機制來有訪問單個像素的數據。

編輯：只是爲了好玩，我已經更新了樣本，以便在它們通過圖像時遮蔽漣漪。

編輯2：爲了更有趣，我在標記圖中添加了填充（不再有裁剪），並添加了「擠壓」因子，可以讓標記的右側比原始更大或更小透視）。由於它稍微降低了性能，因此我已將其上傳爲a separate sample。