Collection d'effet de transition dans un canvas

Télécharger le projet
Commenter

Description

comme le titre l'indique il s'agit d'une collection ,librairie d'effet de transition d'image dans un canvas il y a exactement 40 effets.et chaque effets est représenté par une fonction.
testé avec firefox chrome safari ie 10 et opera et ce doit être compatible avec ie9 ,testé aussi sur dolphin ( bada 2, webkit)

pour chrome certains effets ne fonctionnent pas en local il faut que la source soit en ligne

Source / Exemple : 


var ima		
var ch=1
var tefet=0
var chemin='images/'

function effet(mago){

	clearTimeout(tefet);
	document.getElementById('cs').getContext('2d').restore();
	ima = new Image();
	ima.src = chemin+mago;
	
	ima.onload = function(){
		
		var largeur=Math.floor(ima.width/5);
		var hauteur=Math.floor(ima.height/5);
		
		switch (ch){
			
		case 1:
			draw();
			ch=2;
			break;
		case 2:
			draw2();
			ch=3;
			break;
		case 3:
			draw3();
			ch=4;
			break;
		case 4:
			draw4();
			ch=5;
			break;
		case 5:
			draw5();
			ch=6;
			break;
		case 6:
			draw6();
			ch=7;
			break;
		case 7:
			draw7();
			ch=8;
			break;
		case 8:
			draw8();
			ch=9;
			break;
		case 9:
			draw9();
			ch=10;
			break;
		case 10:
			draw10();
			ch=11;
			break;
		case 11:
			draw11();
			ch=12;
			break;
		case 12:
			draw12();
			ch=13;
			break;
		case 13:
			draw13();
			ch=14;
			break;
		case 14:
			draw14();
			ch=15;
			break;
		case 15:
			draw15();
			ch=16;
			break;
		case 16:
			draw16();
			ch=1;
			break;	
		}
	}
}

function draw(cranl,cranh){

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var cranl=0;
		var cranh=0;
	}
	
	var largeur=Math.floor(ima.width/5);
	var hauteur=Math.floor(ima.height/5);
	
	if (cranl ==4*largeur) {
		largeur=largeur+(ima.width%5);
	}
	else{
		largeur=Math.floor(ima.width/5);
	}
	
	if (cranh ==4*hauteur) {
		hauteur=hauteur+(ima.height%5);
	}
	else{
		hauteur=Math.floor(ima.height/5);
	}
	
	ctx.drawImage(ima, cranl, cranh,largeur,hauteur, cranl, cranh,largeur,hauteur);
	
	cranl+=largeur;
	
	if (cranl >= ima.width){
		cranl=0;
		cranh+=hauteur;
	}
	if (cranh >= ima.height){
		return false;
	}
	tefet=setTimeout(draw,50,cranl,cranh);

}

function draw2(cranl,cranh){

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0){
		var cranl=0;
		var cranh=0;
	}
	
	var largeur=Math.floor(ima.width/5);
	var hauteur=Math.floor(ima.height/5);
	
	ctx.drawImage(ima, cranl, cranh,largeur,hauteur, cranl, cranh,largeur,hauteur);

	cranh+=hauteur;

	if (cranh >= ima.height) {
		cranh=0;
		cranl+=largeur;
	}
	if (cranl > ima.width) {
		return false;
	}
	tefet=setTimeout(draw2,45,cranl,cranh);

}

function draw3(rayon) {

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var rayon=0;
	}
	
	ctx.save();
	ctx.translate(ima.width/2, ima.height/2);
	ctx.beginPath();
	ctx.arc(0, 0, rayon, 0, Math.PI*2, true);
	ctx.clip();
	ctx.drawImage(ima, -(ima.width/2), -(ima.height/2));
	ctx.restore();
	rayon+=15;

	if (rayon>= Math.sqrt((ima.width*ima.width)+(ima.height*ima.height))/2) {
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	tefet=setTimeout(draw3,30,rayon);

}

function draw4(dec) {

	var largeur=Math.floor(ima.width/5);
	
	if (arguments.length == 0) {
		var dec=5;
	}

	dec+=5;

	if (dec > largeur) {
		dec+= largeur/5;
	}

	var ctx=document.getElementById('cs').getContext('2d');
	for (var i=0; i<5; i++){
		ctx.drawImage(ima, largeur*i,0,dec,ima.height , largeur*i,0,dec,ima.height);
	}
	
	if (dec >= largeur) {
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	tefet=setTimeout(draw4,30,dec);
}

function draw5(dec) {

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var dec=10;
	}
	
	ctx.drawImage(ima,0,0,dec,ima.height,0,0,dec,ima.height);
	dec+=10;

	if (dec > ima.width) {
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	tefet=setTimeout(draw5,10,dec);
}

function draw6(dec) {

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var dec=1;
	}
	
	ctx.globalAlpha=dec/10;
	ctx.drawImage(ima,0,0);
	dec+=1;
	if (dec > 10) {
		ctx.globalAlpha=1;
		return false;
	}
	tefet=setTimeout(draw6,60,dec);
}

function draw7(dec) {

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var dec=10;
	}
	
	for (var i=0; i<5; i++){
		ctx.drawImage(ima, (ima.width/2)-dec,0,dec*2,ima.height , (ima.width/2)-dec,0,dec*2,ima.height);

	}
	dec+=10;

	if (dec > ima.width/2){
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	tefet=setTimeout(draw7,30,dec);
}

function draw8(dec) {

	if (arguments.length == 0) {
		var dec=10;
	}

	rr=ima.height/ima.width;
	dec+=15;

	if (dec > ima.width) {
		dec = ima.width+1;
	}
	
	var ctx=document.getElementById('cs').getContext('2d');
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(0,0);
	ctx.lineTo(dec,0);
	ctx.lineTo(0,dec*rr);
	ctx.moveTo(ima.width,ima.height);
	ctx.lineTo(ima.width-dec,ima.height);
	ctx.lineTo(ima.width,ima.height-(dec*rr));
	ctx.closePath();
	ctx.clip();
	ctx.drawImage(ima, 0, 0);
	ctx.restore();
	
	if (dec >= ima.width){
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	tefet=setTimeout(draw8,30,dec);
}

function draw9(rayon) {

	var largeur=Math.floor(ima.width/5);
	var hauteur=Math.floor(ima.height/5);
	
	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var rayon=5;
	}
	
	for (var h=0; h<5+1; h++){
		
		ctx.save();
		ctx.beginPath();
		
		for (var i=0; i<5+1; i++){
			
			ctx.arc((largeur*i), hauteur*h, rayon, 0, Math.PI*2, true);
		}
		
		ctx.closePath();
		ctx.clip();
		ctx.drawImage(ima, 0, 0);
		ctx.restore();
	}
	
	rayon+=3;
	
	if (rayon > hauteur) {
		return false;
	}
	
	tefet=setTimeout(draw9,30,rayon);
}

function draw10(angle,rayon){
	
	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var angle=0;
		var rayon=0;
	}
	
	ctx.save();
	ctx.translate(ima.width/2, ima.height/2);
	ctx.rotate((Math.PI/180)-((Math.PI/180)*(angle/2)));
	ctx.drawImage(document.getElementById('cs'), -(ima.width/2), -(ima.height/2));
	ctx.restore();
	
	ctx.save();
	ctx.beginPath();
	ctx.translate(ima.width/2, ima.height/2);
	ctx.rotate((Math.PI/180)*angle);
	ctx.arc(0, 0, rayon, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.clip();
	ctx.drawImage(ima, -(ima.width/2), -(ima.height/2));
	ctx.restore();
	
	angle+=1440/((Math.sqrt((ima.width*ima.width)+(ima.height*ima.height)))/15);
	if (angle >=360) {
		angle=0;
	}
	rayon+=15;

	if (rayon>= Math.sqrt((ima.width*ima.width)+(ima.height*ima.height))/2) {
		ctx.drawImage(ima,0,0);
		return false;
	}
	
	tefet=setTimeout(draw10,30,angle,rayon);
}

function draw11(dec){

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var dec=0;
	}

	var rr=ima.height/ima.width;
	dec+=15;

	if (dec > ima.width/2) {
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	
	ctx.save();
	ctx.beginPath();
	ctx.rect(0, 0, dec, dec*rr);
	ctx.rect(ima.width, 0, -dec, dec*rr);
	ctx.rect(ima.width, ima.height, -dec, -dec*rr);
	ctx.rect(0, ima.height, dec, -dec*rr);
	ctx.closePath();
	ctx.clip();
	ctx.drawImage(ima, 0, 0);
	ctx.restore();
	
	tefet=setTimeout(draw11,30,dec);
}

function draw12(dec,opa){

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var opa=0;
		var dec=0;
	}
	
	rr=ima.height/ima.width;
	dec+=15;
	opa+=3/(ima.width/15);

	if (dec > ima.width){
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	
	ctx.save();
	ctx.beginPath();
	ctx.translate(ima.width/2, ima.height/2);
	ctx.rect(-(dec/2), -(dec*rr)/2, dec, (dec*rr));
	ctx.closePath();
	ctx.clip();
	ctx.globalAlpha=opa/10;
	ctx.drawImage(ima, -(ima.width/2), -(ima.height/2));
	ctx.restore();
	tefet=setTimeout(draw12,30,dec,opa);
}

function draw13(dec){

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0) {
		var dec=0;
	}

	dec+=15
	
	if (dec > ima.height){
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	
	ctx.drawImage(ima,0,ima.height-dec);
	ctx.restore();
	tefet=setTimeout(draw13,30,dec);
}

function draw14(dec,haut,opa){

	var ctx=document.getElementById('cs').getContext('2d');

	if (arguments.length == 0) {
		var haut = ima.height/4;
		var opa=0;
		var dec=0;
	}
	
	dec+=15;
	opa+=3/(ima.width/15);
	
	if (dec > ima.width){
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	
	ctx.save();
	ctx.beginPath();
	ctx.rect(0,0, dec, haut);
	ctx.translate(ima.width,0);
	ctx.rect(0,haut,-dec-dec/4,haut);
	ctx.translate(-ima.width,haut*2);
	ctx.rect(0,0, dec+dec/2, haut);
	ctx.translate(ima.width,haut);
	ctx.rect(0,0,-dec,haut);
	ctx.translate(-ima.width,-haut*3);
	ctx.closePath();
	ctx.clip();
	ctx.globalAlpha=opa/10;
	ctx.drawImage(ima,0,0);
	ctx.restore();
	tefet=setTimeout(draw14,20,dec,haut,opa);
}

function draw15(dec,opa){

	var ctx=document.getElementById('cs').getContext('2d');
	
	if (arguments.length == 0){
		var opa=0;
		var dec=0;
	}

	var rr=ima.height/ima.width;
	dec+=15;
	opa+=15/(ima.width/15);

	if (dec > ima.width/2){
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	ctx.save();
	ctx.globalAlpha=opa/10;
	ctx.drawImage(ima, 0,0,ima.width/2, ima.height/2,-(ima.width/2)+dec,-(ima.height/2)+(dec*rr),ima.width/2, ima.height/2);
	ctx.drawImage(ima, ima.width/2, 0,ima.width/2, ima.height/2, (ima.width)-dec,-(ima.height/2)+(dec*rr),ima.width/2, ima.height/2);
	ctx.drawImage(ima, 0, ima.height/2, ima.width/2, ima.height/2, -(ima.width/2)+dec,(ima.height)-(dec*rr),ima.width/2, ima.height/2);
	ctx.drawImage(ima, ima.width/2, ima.height/2,ima.width/2, ima.height/2, (ima.width)-dec,(ima.height)-(dec*rr),ima.width/2, ima.height/2);
	ctx.restore();
	
	tefet=setTimeout(draw15,30,dec,opa);
	
}

function draw16(dec){

	if (arguments.length == 0){
		var dec=0;
	}
	
	var ctx=document.getElementById('cs').getContext('2d');

	dec+=15;
	
	if (dec > ima.height){
		ctx.drawImage(ima, 0, 0);
		return false;
	}
	
	ctx.drawImage(ima,0,0,ima.width,dec);
	ctx.restore();
	tefet=setTimeout(draw16,30,dec);
}

Conclusion :


gloup gloup
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)