25 Javasript: Piano Cartesiano.

Crea la tela per il disegno, copia le impostazioni, crea gli assi. 

 

<canvas id="tela" width="600" height="600" ></canvas>

 

<script>

// Attiviamo la grafica!!

var grafica = document.getElementById("tela").getContext("2d");

grafica.strokeRect(0,0,600,600);

grafica.transform(10,0,0,-10,300,300);

grafica.lineWidth = 0.1;

 

// assi

grafica.beginPath();

grafica.moveTo(-30,0);

grafica.lineTo(30,0);

grafica.moveTo(0,-30);

grafica.lineTo(0,30);

grafica.stroke();

 

// rosso

grafica.strokeStyle = "red";

</script>

 

Adesso aggiungi dei comandi moveTo e lineTo per ottenere le seguenti figure nella posizione che vuoi tu. Le coordinate x e y possono andare da -30 a 30.