JavaScript Boucle pour créer une grille sur la toile

Question

Ce que j'essaie de faire est de remplir myCanvas avec des blocs de 32x32 couleurs aléatoires. J'utilise une boucle pour créer les blocs et leur attribuer des couleurs. J'ai compris comment faire pour que la ligne descende sur l'axe Y alors que la boucle continue, mais je ne peux pas enrouler ma tête pour obtenir l'axe X à droite.

Si vous agrandissez la toile, vous verrez des lignes de blocs de 20 blocs aller vers la droite.

var c=document.getElementById("myCanvas"); 
     var ctx=c.getContext("2d"); 
     for (i = 0; i < 400; i++) { 
      var X = i * 32; 
      var Y = Math.floor(i/20) * 32; 
      ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16); 
      ctx.fillRect(X, Y, 32, 32); 
      console.log('X:' + X); 
      console.log('Y:' + Y); 
     } 

J'ai essayé d'utiliser le module comme ceci:

if(i % 20 == 0){ 
X = 0; 
} 

Mais il fixe seulement quand je reçois des multiples de 20, de sorte que le côté gauche de la toile sera rempli avec des blocs. Mon problème est de contourner les maths impliqués dans ce travail. Désolé, je suis fatigué et à ce nouveau :(

Fiddle: http://jsfiddle.net/orwfo7re/

Answer 1

vous étiez déjà assez proche avec votre suggestion de module Cependant! , votre déclaration ne if est exécuté quandi % 20 == 0, ce qui par exemple n'est pas vrai pour i=21

Le solut L'ion est d'utiliser simplement var x = (i % 20) * 32 pour var x dans votre algoritm. Alors:

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
for (i = 0; i < 400; i++) { 
    var X = (i % 20) * 32; 
    var Y = Math.floor(i/20) * 32; 
    ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16); 
    ctx.fillRect(X, Y, 32, 32); 
} 

violon: https://jsfiddle.net/MartyB/ur9vug0x/2/

Answer 2

Voulez-vous dire de faire quelque chose comme ceci:

var c=document.getElementById("myCanvas"); 
      var ctx=c.getContext("2d"); 
      var width = 640; 
      var height = 640; 

      for (y=0; y< height; y=y+32) { 
       for (x=0; x < width; x=x+32) { 
       ctx.fillStyle='#'+Math.floor(Math.random()*16777215).toString(16); 
       ctx.fillRect(x, y, 32, 32); 
       } 
      }