You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
133 lines
2.4 KiB
133 lines
2.4 KiB
var canvas = document.getElementById("terrain");
|
|
|
|
canvas.width = window.innerWidth*0.74;
|
|
var lt = canvas.width;
|
|
canvas.height = lt*0.536;
|
|
var ht = canvas.height;
|
|
|
|
|
|
var c = canvas.getContext('2d');
|
|
console.log(canvas);
|
|
|
|
c.lineWidth="5";
|
|
|
|
|
|
//Bordures du terrain
|
|
c.beginPath();
|
|
c.rect(0, 0, lt, ht);
|
|
c.stroke();
|
|
|
|
|
|
c.lineWidth="2";
|
|
//Ligne centrale
|
|
c.beginPath();
|
|
c.moveTo(lt/2, ht);
|
|
c.lineTo(lt/2, 0);
|
|
c.stroke();
|
|
|
|
//Cercle central
|
|
c.beginPath();
|
|
c.arc(lt/2, ht/2, lt*0.064, 0, Math.PI*2, false);
|
|
c.stroke();
|
|
|
|
|
|
/* RAQUETTES */
|
|
//Rectangle raquette gauche
|
|
c.beginPath();
|
|
c.rect(0, ht/3, lt*0.208, ht/3);
|
|
c.stroke();
|
|
|
|
//Rectangle raquette droite
|
|
c.beginPath();
|
|
c.rect(lt-lt*0.208, ht/3, lt-lt*0.208, ht/3);
|
|
c.stroke();
|
|
|
|
//Cercle raquette gauche
|
|
c.beginPath();
|
|
c.arc(lt*0.208, ht/2, lt*0.064, 1.5*Math.PI, 0.5*Math.PI, false);
|
|
c.stroke();
|
|
|
|
//Cercle raquette droite
|
|
c.beginPath();
|
|
c.arc(lt-(lt*0.208), ht/2, lt*0.064, 0.5*Math.PI, 1.5*Math.PI, false);
|
|
c.stroke();
|
|
|
|
|
|
/* LIGNES LANCERS FRANCS */
|
|
//Ligne lf 1 gauche
|
|
c.beginPath();
|
|
c.moveTo(0, 0.06*ht);
|
|
c.lineTo(lt*0.075, 0.06*ht);
|
|
c.stroke();
|
|
|
|
//Ligne lf 2 gauche
|
|
c.beginPath();
|
|
c.moveTo(0, 0.94*ht);
|
|
c.lineTo(lt*0.075, 0.94*ht);
|
|
c.stroke();
|
|
|
|
// Cercle lf gauche
|
|
c.beginPath();
|
|
c.arc(lt*0.063, ht/2, ht*0.44, 1.5*Math.PI, 0.5*Math.PI, false);
|
|
c.stroke();
|
|
|
|
|
|
//Ligne lf 1 droite
|
|
c.beginPath();
|
|
c.moveTo(lt, 0.06*ht);
|
|
c.lineTo(lt*0.925, 0.06*ht);
|
|
c.stroke();
|
|
|
|
//Ligne lf 2 droite
|
|
c.beginPath();
|
|
c.moveTo(lt, 0.94*ht);
|
|
c.lineTo(lt*0.925, 0.94*ht);
|
|
c.stroke();
|
|
|
|
//Cercle lf droite
|
|
c.beginPath();
|
|
c.arc(lt*0.937, ht/2, lt*0.236, 0.5*Math.PI, 1.5*Math.PI, false);
|
|
c.stroke();
|
|
|
|
|
|
/* PANIERS */
|
|
//Cercle panier gauche
|
|
c.beginPath();
|
|
c.arc(lt*0.063, ht/2, ht*0.083, 1.5*Math.PI, 0.5*Math.PI, false);
|
|
c.stroke();
|
|
|
|
//Panier gauche
|
|
c.beginPath();
|
|
c.moveTo(lt*0.06, ht*0.44);
|
|
c.lineTo(lt*0.06, ht*0.56);
|
|
c.stroke();
|
|
|
|
c.beginPath();
|
|
c.arc(lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
|
|
c.stroke();
|
|
|
|
c.beginPath();
|
|
c.moveTo(lt*0.06, ht/2);
|
|
c.lineTo(lt*0.067, ht/2);
|
|
c.stroke();
|
|
|
|
|
|
//Cercle panier droit
|
|
c.beginPath();
|
|
c.arc(lt-lt*0.063, ht/2, ht*0.083, 0.5*Math.PI, 1.5*Math.PI, false);
|
|
c.stroke();
|
|
|
|
//Panier droit
|
|
c.beginPath();
|
|
c.moveTo(lt-lt*0.06, ht-ht*0.44);
|
|
c.lineTo(lt-lt*0.06, ht-ht*0.56);
|
|
c.stroke();
|
|
|
|
c.beginPath();
|
|
c.arc(lt-lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
|
|
c.stroke();
|
|
|
|
c.beginPath();
|
|
c.moveTo(lt-lt*0.06, ht-ht/2);
|
|
c.lineTo(lt-lt*0.067, ht-ht/2);
|
|
c.stroke(); |