canvas

Bande dans un canvas

Complétez le code ci-dessous pour produire une image telle que la suivante :

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
</head>
<body>
  
	
	<canvas id="figexbandes" width="100" height="100" style="border: dashed 1px #ff0000;">
		 
	</canvas>
	
<script>

// on récupère l'élément canvas par son identifiant :
var c = document.getElementById("figexbandes");
// on précise que l'on va faire de la 2d 
var ctx= c.getContext("2d");

// on crée une image de 100px sur 100px que l'on nomme bandes
var bandes = ctx.createImageData( 100 , 100 );

var nbPixels = 100*100 ;

// on récupère le tableau des pixels de l'image
// (ils sont tous blancs pour le moment !)
var tableauPixels = bandes.data;  


// ICI BOUCLE DE CREATION DES BANDES
// On crée 10 lignes de pixels rouges 
// ligne 0 : pixels numéros 0 à 99, ligne 2 : pixels numéros 100 à 199
// ligne 3 : pixels numéros 200 à 299...
// puis dix lignes de pixels blancs, puis dix lignes de pixels rouges ...



//  on affiche maintenant l'image au point (0,0)
ctx.putImageData( bandes  , 0 , 0 ); 

</script> 

</body>
</html>

Une piste possible : Math.floor(y/10) % 2 === 0 vaut true pour y entre 0 et 9, entre 20 et 29, entre 40 et 49... mais false entre 10 et 19, entre 30 et 39... En d'autres termes, true lorsque le quotient entier de la division y/10 est pair, false lorsque ce quotient est impair.

Un code possible :

<!DOCTYPE html>
<html lang="fr">

<head>
<meta charset="utf-8">
<title>Canvas HTML5</title>
</head>
<body>
  
	
	<canvas id="figcorrexbandes" width="100" height="100" style="border: dashed 1px #ff0000;">
		 
	</canvas>
	
<script>

// on récupère l'élément canvas par son identifiant :
var c = document.getElementById("figcorrexbandes");
// on précise que l'on va faire de la 2d 
// (l'élément canvas permet aussi de faire de la 3d)
var ctx= c.getContext("2d");

// on crée une image de 100px sur 100px que l'on nomme bandes
var bandes = ctx.createImageData( 100 , 100 );

var nbPixels = 100*100 ;

// on récupère le tableau des pixels de l'image
// (ils sont tous blancs pour le moment !)
var tableauPixels = bandes.data;  


// bande rouge 
//  opacité 100% 
// on ne crée en fait que les pixels rouges
// car ils sont tous blancs par défaut 
for(let y = 0; y < 100;  y += 1) // y : ligne du pixel
{
	if( Math.floor(y/10) % 2 === 0 )  
	{
		for(let i = 100*y ; i < 100*y+100 ; i += 1)    // i parcourt les numéros de pixels de la ligne y
		{
			tableauPixels[4*i] = 200; // composante du rouge 
			tableauPixels[4*i+3] = 255; // Valeur Alpha
		}
	}
}



//  on affiche maintenant l'image au point (0,0)
ctx.putImageData( bandes  , 0 , 0 ); 

</script> 

</body>
</html>