Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: humberto ml en 21 Junio 2016, 22:11 pm



Título: javascript/canvas|| hacer un triangulo y darle la medida de los catetos
Publicado por: humberto ml en 21 Junio 2016, 22:11 pm
hola necesito ayuda en este codigo lo que pasa es que quiero que se pueda hacer el triangulo pero hay un error si pones 50 y 0 se hace un triangulo y no debe ser asi debe ser una linea y no se  como resolver eso bn GRACIAS.
<html>
<head>
<title>Script para triángulos</title>
</head>

<body>
<form name="calc">
<input type="text" name="n1" value="50">
<input type="text" name="n2">
<input type="button" value="calcular"  onclick="calcular()">
<canvas id='canvas1' width="600" height="250" style= "border: 1px solid #CCF" >Tu navegador no soporta htmal5</canvas>
</form>
<script type= "text/javascript">
function calcular(){
var n1 =document.calc.n1.value;
var n2 =document.calc.n2.value;
var c=document.getElementById ('canvas1');
var r= c.getContext ('2d');
r.beginPath();
r.moveTo(n2,10);
r.lineTo(10,10);
r.lineTo(10,n1);
r.closePath();
r.stroke();
}
</script>
</body>
</html>


Título: Re: javascript/canvas|| hacer un triangulo y darle la medida de los catetos
Publicado por: WHK en 24 Junio 2016, 17:38 pm
Hola, eso lo puedes hacer solo con css: https://css-tricks.com/examples/ShapesOfCSS/

Código:
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}

Acá hay un generador de triangulos: http://apps.eky.hk/css-triangle-generator/

Acá la explicación: http://codepen.io/chriscoyier/pen/lotjh