Ecco la formuletta:
<!DOCTYPE html>
<html>
<script src="funzioniCanvas.js"></script>
<script>
var bricks;
var NCOLS=10;
var NROWS=5;
var BRICKWIDTH=45;
var BRICKHEIGHT=10;
var PADDING=1;
function init(){
//questa deve esserci sempre all'inizio: inizializza la variabile ctx, contesto del canvas.
initContext("canvas");
//seguono tutte le altre funzioni.
for(var i=0;i<NCOLS;i++){
for(var j=0;j<NROWS;j++){
rect((i*(BRICKWIDTH+PADDING))+PADDING,
(j*(BRICKHEIGHT+PADDING))+PADDING,
BRICKWIDTH,BRICKHEIGHT,"maroon");
}
}
}
window.addEventListener("load",init);
</script>
<body>
<canvas id="canvas" width=500 height=500></canvas>
</body>
</html>
Il codice Javascript inizia con l'aggiunta dell'EventListener per l'evento load all'oggetto window.L'evento load viene associato a una funzione iniziale dal nome qualunque (in questo caso l'ho chiamata Init ma avrei potuto pure chiamarla Pasquale...), e deve però obbligatoriamente chiamare la funzione initContext che è contenuta nella libreria funzioniCanvas.js e che inizializza il context attribuendovi la variabile ctx.
Quindi c'è il codice per disegnare i "mattoni" del muro.
Per ogni colonna, per ogni riga, disegna il mattone con le coordinate ottenute moltiplicando il numero rispettivamente di colonna e di riga per la coordinata x e la coordinata y.
Ecco il risultato:
Nessun commento:
Posta un commento