我已經有了一個圖像的畫布，我想淡入淡出圖像不斷。我已經使用上面的代碼：在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”，打算打印錯字？ –

總結

以上是生活随笔為你收集整理的用html5做淡出淡入效果,在Html5 canvas中淡入淡出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。