GoSlideshow HTML5 Canvas

分享于 

2分钟阅读

Web开发

  繁體 雙語

介绍

GoSlideshow是一个简单的图片 slider,为支持HTML5的每个网络浏览器创建,即使是智能手机。

代码

图像:


var imagePaths = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg"]; 



声明:

var showCanvas = null;


var showCanvasCtx = null;


var img = document.createElement("img");


var currentImage = 0;


var revealTimer;



window.onload = function () {


 showCanvas = document.getElementById('GoSlideshow');


 showCanvasCtx = showCanvas.getContext('2d');



 img.setAttribute('width','600');


 img.setAttribute('height','400');


 switchImage();



 setInterval(switchImage,3000);


 } 



函数:


function switchImage() {


 img.setAttribute('src',imagePaths[currentImage++]);


 if (currentImage> = imagePaths.length)


 currentImage = 0;



 showCanvasCtx.globalAlpha = 0.1;


 revealTimer = setInterval(revealImage,100);


}



function revealImage() {


 showCanvasCtx.save();


 showCanvasCtx.drawImage(img,0,0,600,400);


 showCanvasCtx.globalAlpha += 0.1;


 if (showCanvasCtx.globalAlpha> = 1.0)


 clearInterval(revealTimer);


 showCanvasCtx.restore();


}




Points of Interest

HTML5 Canvas 实验

历史记录

版本 1.6


相关文章