用另一個元素切換JS canvas元素

Question

我正在使用一個修改過的face-to-gif--原型可以在這裏找到：http://bookfeels.herokuapp.com/。基本上，它是一款使用您的網絡攝像頭製作GIF的應用程序。

我試圖簡化用戶界面，所以我希望記錄的畫布淡出並由生成的GIF替換，然後在用戶想要重新錄製時再次淡入。我工作的兩個元素在這裏：

facetogif.canvas = document.createElement('canvas'); 
facetogif.gifContainer = document.getElementById('gifs-go-here'); 

所以，我希望facetogif.canvas淡出，並通過facetogif.gifContainer所取代，但我是新來的JS和我不知道如何搜索這個。任何人都可以將我指向正確的方向嗎？提前致謝！

Answer 1

沒問題。

Here's how to change an image on the canvas：

function imgChange(imagePath) { 
     var c=document.getElementById("myCanvas"); 
     var ctx=c.getContext("2d"); 
     var img=new Image(); 
     img.onload = function(){ 
       ctx.drawImage(img,0,0); 
     }; 
     img.src=imagePath; 
} 

您也提到要淡出的映像。我會說最簡單的方法就是jQuery's fadeOut method。

這看起來可能有點嚇人，但實際上並沒有什麼不同，因爲您已經在使用document.createElement等進行的操作。