用另一个元素切换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等进行的操作。