用html5做淡出淡入效果,在Html5 canvas中淡入淡出

我已经有了一个图像的画布，我想淡入淡出图像不断。我已经使用上面的代码：在Html5 canvas中淡入淡出

var canvas;

var context;

var ga = 0.0;

var timerId = 0;

var timerId1 = 0;

function init()

{

canvas = document.getElementById("myCanvas");

context = canvas.getContext("2d");

timerId = setInterval("fadeIn()", 300);

console.log(timerId);

}

function fadeIn()

{

context.clearRect(0,0, canvas.width,canvas.height);

context.globalAlpha = ga;

var photo = new Image();

photo .onload = function()

{

context.drawImage(photo , 0, 0, 450, 500);

};

photo .src = "photo .jpg";

ga = ga + 0.1;

if (ga > 1.0)

{

fadeOut();

goingUp = false;

clearInterval(timerId);

}

}

function fadeOut()

{

context.clearRect(0,0, canvas.width,canvas.height);

context.globalAlpha = ga;

var photo = new Image();

photo .onload = function()

{

context.drawImage(photo , 0, 0, 450, 500);

};

photo .src = "photo .jpg";

ga = ga - 0.1;

if (ga < 0)

{

goingUp = false;

clearInterval(timerId);

}

}

是否可以插入两个功能集成到setIntervals ??我想在淡入功能后触发fadeOut。这怎么可能？？

+0

你的意思是你想让图像闪烁？ (进，出，进，出......) –

+0

是的，确切的!!!不断淡出淡出！ –

+0

'照片.src =“照片.jpg”，打算打印错字？ –