使用drawImage将加载的图像淡入Canvas

关于交叉渐变图像的这个问题已经给出了Canvas中交叉渐变解决方案的答案。 我试图做同样的事情，唯一的区别是我试图淡化运行时加载的图像。

图像被正确加载但没有可见的淡入淡出。 由于加载的图像，这不起作用吗？ 谢谢。

HTML

JS

 var toggle = true; var canvas = document.getElementById('bg1'); canvas.width = $(document).width(); canvas.height = $(document).height(); var ctx = canvas.getContext('2d'); var canvas2 = document.getElementById('bg2'); canvas2.width = $(document).width(); canvas2.height = $(document).height(); var ctx2 = canvas2.getContext('2d'); var image = new Image(); image.src = 'download1.jpg'; var image2 = new Image(); image2.src = 'download2.jpg'; image.onload = function() { ctx.drawImage(image, 0, 0, 200, 100); ctx2.drawImage(image2, 0, 0, 200, 100); }; $('#wrapper').click(function () { if (toggle) { $('#bg2').fadeIn(); $('#bg1').fadeOut(); } else { $('#bg1').fadeIn(); $('#bg2').fadeOut(); } toggle = !toggle; }); 

Answer 1

是的，你需要给你的图像加载时间。

但是，jQuery不能在canvas元素上执行fadeIn / fadeout，因此您必须手动执行此操作。

演示： http ： //jsfiddle.net/m1erickson/zw9S4/

码：

           Fade to next Image
 
   

Answer 2

尝试直接在canvas上淡入/淡出图像，而不是淡入和淡出canvas元素（或者使用canvas实际上没有任何点，因为您可以使用图像元素）。

首先，当然，等待图片加载：

 var isBusy = false, /// for fade loop count = 2; /// number of images to load image = new Image(); image2 = new Image(); /// setup load handler image.onload = image2.onload = handleLoad; image.src = 'download1.jpg'; image2.src = 'download2.jpg'; function handleLoad() { count--; if (count === 0) { /// when loaded draw a single image onto canvas ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height); } }; 

现在我们可以稍微改变点击处理程序并仅使用canvas来淡入下一个图像：

 $('#wrapper').click(function () { var img, /// current image to fade in opacity = 0; /// current globalAlpha of canvas /// if we're in a fade exit until done if (isBusy) return; isBusy = true; /// what image to use img = toggle ? image2 : image; /// fade in (function fadeIn() { /// set alpha ctx.globalAlpha = opacity; /// draw image with current alpha ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height); /// increase alpha to 1, then exit resetting isBusy flag opacity += 0.02; if (opacity < 1) requestAnimationFrame(fadeIn); else isBusy = false; })(); toggle = !toggle; }); 

在线演示

希望这可以帮助。