
Triangulo rectangulo editable con canvas
JavaScript
Actualizado el 17 de Marzo del 2018 por Anonymous (35 códigos) (Publicado el 18 de Agosto del 2016)
16.269 visualizaciones desde el 18 de Agosto del 2016

<html>
<head>
<title>poner al canvas</title>
<script type="text/javascript">
function dibujar(){
var canvas = document.getElementById('miCanvas');
var contexto = canvas.getContext('2d');
var n1=document.f1.txtn1.value;
var v1=parseInt(25)+ parseInt(n1);
var n2=document.f1.txtn2.value;
var v2=parseInt(25)+ parseInt(n2);
// curva cuadratica, esquina bien redondeada
contexto.beginPath();
contexto.moveTo(v1,25);//aqui va le numero 1
contexto.lineTo(25,25);
contexto.quadraticCurveTo(25,25,25,75);
contexto.lineTo(25,v2);// aqui va el numero 2
contexto.fill();
}
</script>
</head>
<body>
<form name="f1">
<input type="text" name="txtn1" placeholder="valor horizontal">
<input type="text" name="txtn2" placeholder="valor vertical">
<input type="button" value="Calcular" onclick="dibujar()">
<input type="button" value="Limpiar" onclick="">
<!-- necesito un boton de limpiar para este programa se divuja un triangulo conlas medidas que le des al programa-->
<br>
<canvas id="miCanvas" width="450" height="350">Su navegador no soporta Canvas.</canvas>
</form>
</body>
</html>
- se pùede poner cualquier medida desde in input.