11480 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je suis en train de créer une animation en canvas:


<canvas id="can" width="800" height="500" style="border:solid;"></canvas>


var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'orange';
ctx.strokeStyle = 'orange';

function draw() 
{
	ctx.clearRect(0, 0, 800, 500); // j'efface le canvas
	ctx.save();//sauvegarde le canvas effacé
	var time = new Date();
	var n=time.getMilliseconds()/10//pour avancer sur x
	var t=Math.sin((Math.PI/250)*time.getMilliseconds());//pour bouger sur y selon une sinusoidale
	ctx.translate(00,200);//je part environ de la moitié du canvas en y
	ctx.translate(12*n,100*t);//position de mon point
	ctx.fillRect(0, 0, 15, 15);//je trace mon point
	ctx.restore();//je reviens à mon canvas effacé
}

setInterval(draw,10);


Cette animation met, évidemment Smiley biggol , 1 seconde à parcourir l’intégralité du canvas. Comment faire pour la ralentir, et mettre 5 secondes? Smiley prie
Modérateur
Bonjour,

Ça ?

var canvas = document.getElementById('can');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'orange';
ctx.strokeStyle = 'orange';

var duree = 5; // duree en seconde

function draw() 
{
	ctx.clearRect(0, 0, 800, 500); // j'efface le canvas
	ctx.save();//sauvegarde le canvas effacé
	var time = (new Date()%(duree*1000))/duree;
	var n=time/10; //pour avancer sur x
	var t=Math.sin((Math.PI/250)*time);//pour bouger sur y selon une sinusoidale
	ctx.translate(0,200);//je part environ de la moitié du canvas en y
	ctx.translate(12*n,100*t);//position de mon point
	ctx.fillRect(0, 0, 15, 15);//je trace mon point
	ctx.restore();//je reviens à mon canvas effacé
}
setInterval(draw,10);


Amicalement,
Modifié par parsimonhi (16 Nov 2020 - 19:12)
Merci pour ta réponse!

J'ai finalement changé mon code, en appelant la fonction dans une boucle dans laquelle j'ai mis un timeout. Ça permet également d’arrêter la fonction après x temps.

Le voila pour ceux que ça pourrait intéresser:


function draw(i) 
{
	
	ctx.clearRect(0, 0, 800, 500); // j'efface le canvas
	ctx.save();//sauvegarde le canvas efface
	var t=Math.sin((Math.PI/100)*i);//pour bouger sur y selon une sinusoidale
	ctx.translate(00,200);//je part environ de la moitié du canvas en y
	ctx.translate(i*2,100*t);//position de mon point
	ctx.fillRect(0, 0, 25, 25);//je trace mon point
	ctx.restore();//je reviens à mon canvas effacé
}

for(let i=0;i<360;i++)
{
	//affiche(i);
	setTimeout(function()
		{ 
			draw(i);
		},
		10*i );
}