Dessiner une maison

Le canevas

Le code de la page

<body> <canvas width ="200" height ="200"> ... contexte.lineWidth ="3"; // le toit contexte.fillStyle ="navy"; contexte.moveTo(30,80); contexte.lineTo(80,40); contexte.lineTo(130,80); contexte.closePath(); contexte.fill(); //les murs contexte.beginPath(); contexte.strokeStyle ="red"; contexte.moveTo(40,80); contexte.lineTo(40,120); contexte.lineTo(120,120); contexte.lineTo(120,80); contexte.stroke(); // la porte contexte.beginPath(); contexte.strokeStyle="green"; contexte.rect(70,100,15,20); contexte.stroke();

Le canevas fait 200 par 200.

Le toit c'est un triangle rempli de bleu marine.
Il faut donc définir la couleur de remplissage puis créer un chemin fermé (1 moveTo, 2 lineTo et closePath) puis remplir cette forme.

Les murs c'est un rectangle non fermé avec coloriage des contours en rouge. Donc 1 moveTo, 3 lineTo et pas de closePath !

Les paramètres de la méthode rect sont : rect(x,y,w,h) avec x et y : coin supérieur gauche du rectangle ; w : largeur et h : hauteur.
Retour menu