diff --git a/T3/canvas.css b/T3/canvas.css index bf737a48c878582bc495d783c0f5687ae131729b..cb27467182800223b23cf42f7f5a3482e08fbc7b 100644 --- a/T3/canvas.css +++ b/T3/canvas.css @@ -11,4 +11,15 @@ canvas { display:block; height: 100%; width: 100%; +} + +div { + position: absolute; + left: 10px; + top: 10px; + width: 300px; +} + +#number { + width: 50px; } \ No newline at end of file diff --git a/T3/lines.html b/T3/lines.html index b837a56bdaa6061f1c22c29dd8c72e4f1a874a62..4e989f4a2187a721c78751beda894131e46393f9 100644 --- a/T3/lines.html +++ b/T3/lines.html @@ -8,7 +8,13 @@ <canvas id="canvas"> Your browser does not support the HTML5 canvas tag. </canvas> - <p>asdsadsa</p> + <div> + <h3> Gerador de PolÃgonos </h3> + Informe um número de 3 a 8: + <input type="number" id="number" step="1" min="3" max="8" value="3" required/> + <input type="submit" onclick="generatePolygon()" value="Gerar"/> + <span class="validity"></span> + </div> </body> <script type="text/javascript" src="lines.js"></script> diff --git a/T3/lines.js b/T3/lines.js index 8271b91fa8b42ebd6a737dabcdde2c0fa9eea647..56131a2a8d4dce5690d23b6e35804faee26c3c68 100644 --- a/T3/lines.js +++ b/T3/lines.js @@ -155,6 +155,66 @@ function handleMouse() { } } +function generatePolygon() { + edges = parseInt(document.getElementById("number").value,10); + if (edges >= 3 && edges <= 8) { + lines = []; + switch (edges) { + case 3: + lines = [new Line(centerX,centerY-300,centerX+300,centerY+300), //linha \ + new Line(centerX,centerY-300,centerX-300,centerY+300), //linha / + new Line(centerX-300,centerY+300,centerX+300,centerY+300)]; //linha _ + break; + case 4: + lines = [new Line(centerX-300,200,centerX+300,200), //linha _ topo + new Line(centerX+300,200,centerX+300,800), //linha | direita + new Line(centerX-300,200,centerX-300,800), //linha | esquerda + new Line(centerX-300,800,centerX+300,800)]; //linha _ baixo + break; + case 5: + lines = [new Line(centerX,centerY-350,centerX+300,centerY-150), //linha \ direita + new Line(centerX,centerY-350,centerX-300,centerY-150), //linha / esquerda + new Line(centerX+300,centerY-150,centerX+215,centerY+200), //linha \ esquerda + new Line(centerX-300,centerY-150,centerX-215,centerY+200), //linha / direita + new Line(centerX-215,centerY+200,centerX+215,centerY+200)]; //linha _ baixo + break; + case 6: + lines = [new Line(centerX-200,200,centerX+200,200), //linha _ topo + new Line(centerX-200,200,centerX-400,550), //linha / esq + new Line(centerX-400,550,centerX-200,900), //linha \ esq + new Line(centerX+200,200,centerX+400,550), //linha / dir + new Line(centerX+400,550,centerX+200,900), //linha \ dir + new Line(centerX-200,900,centerX+200,900)]; //linha _ baixo + break; + case 7: + lines = [new Line(centerX-250,300,centerX,200), //linha / topo + new Line(centerX,200,centerX+250,300), //linha / topo + new Line(centerX-250,300,centerX-350,630), //linha / esq + new Line(centerX+250,300,centerX+350,630), //linha \ dir + new Line(centerX-350,630,centerX-170,900), //linha \ esq + new Line(centerX+350,630,centerX+170,900), //linha / dir + new Line(centerX-170,900,centerX+170,900)]; //linha _ baixo + break; + case 8: + lines = [new Line(centerX-220,100,centerX+220,100), //linha _ topo + new Line(centerX-220,100,centerX-420,375), //linha / esq + new Line(centerX-420,375,centerX-420,650), //linha | esq + new Line(centerX-420,650,centerX-220,925), //linha \ esq + new Line(centerX+220,100,centerX+420,375), //linha / esq + new Line(centerX+420,375,centerX+420,650), //linha | esq + new Line(centerX+420,650,centerX+220,925), //linha \ esq + new Line(centerX-220,925,centerX+220,925)]; //linha _ baixo + break; + default: + break; + } + drawCurrentCanvas(); + } else { + console.log("Valor inválido."); + alert("Valor inválido! O número de arestas deve estar no intervalo de [3..8].") + } +} + //function that updates screen function drawCurrentCanvas() { drawLines();