Question

有人知道如何实现这样的目标吗？

我想做类似的事情，但我是html5中的新东西和所有这些东西

谢谢！

Answer 1

当然可以。首先，你必须绘制背景图像。并在两侧提供两个按钮。单击这些按钮可以调用一个函数...它会调用一个动画的setInterval（）函数（在这种情况下，图像必须淡入淡出并且必须形成一个新图像）。为了提供褪色效果，我们有一个流行的参数。 ctx.globalAlpha（）。在每个动画步骤中更改它的值。 Lemme提供了一个示例代码，以便您可以正确理解它。

canvas = document.getElementById("canvas");  
ctx = canvas.getContext("2d");
var ms = new Image();      
ms.src = "images/asdf.jpg"
ctx.drawImage(ms,0,0);  // Will draw the initial image (assume)
ctx1 = canvas.getContext("2d");

现在让我定义一下onclick函数。

onclick="caller()";

调用函数应该调用animate函数

function caller()
{
   i=1;
   inter=setInterval(animate(),500); // Calls the animate function every 500 msec
}

动画功能看起来如下所示

function animate()
{
   i=i-0.1; 
   ctx1.globalAlpha=i;

   if(i=0)
   {
        clearInterval(inter);
        ctx1.drawImage(ms2,0,0);  // This will draw the next image defined in ms2.
   }
}

因此图像将淡出并在5秒内出现新图像。如果你有几个图像使用数组，肯定javascipts可以帮助你以你想要的方式实现它们。如果您需要对您所面临的 SPECIFIC 问题进行更多说明，请与我们联系。

HTML5网页动画

1 个答案: