javascript/canvas|| hacer un triangulo y darle la medida de los catetos

humberto ml · 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>

WHK · 24 Junio 2016, 17:38 PM

Hola, eso lo puedes hacer solo con css: https://css-tricks.com/examples/ShapesOfCSS/

Código [Seleccionar]

#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

Test Foro de elhacker.net SMF 2.1

javascript/canvas|| hacer un triangulo y darle la medida de los catetos

humberto ml

WHK