GoSlideshow HTML5 Canvas

分享于 

分钟阅读

 
点击句子查看译文 显示原文      显示译文      双语对照    源址


Introduction

GoSlideshow is a simple awesome image slider, created for each web browser that supports HTML5, even in smartphones.

The Code

Images :


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



Declaration :

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);


 } 



Functions :


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 Experiments

History

Version 1.6