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等所做的事情没有太大的不同。

用另一个元素切换JS canvas元素

1 个答案: