Código de JavaScript - triangulo rectangulo editable con canvas

Imágen de perfil

triangulo rectangulo editable con canvasgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 20 de Agosto del 2016 por Humberto (Creado el 18 de Agosto del 2016)
678 visualizaciones desde el 18 de Agosto del 2016. Una media de 49 por semana
el código lo que hace es dibujarte un triangulo rectángulo con las medidas que le has dado (pixeles) aunque me podrían aportar una ayuda a el código como ponerle un botón limpiar para no batallar y volver a cargar la pagina de nuevo.
Captura

Requerimientos

tener un navegador de interent actualizado como chrome que tenga canvas y javascript

0.9
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 19 de Agosto del 2016 (Creado el 18 de Agosto del 2016)gráfica de visualizaciones de la versión: 0.9
182 visualizaciones desde el 18 de Agosto del 2016. Una media de 14 por semana

0.9.1

Actualizado el 23 de Agosto del 2016 (Creado el 20 de Agosto del 2016)gráfica de visualizaciones de la versión: 0.9.1
497 visualizaciones desde el 20 de Agosto del 2016. Una media de 35 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Actualización!
-botón limpiar
-estilo en el canvas
-triangulo blanco
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<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);
		  contexto.beginPath();
		  contexto.moveTo(v1,25);//aquí va la anchura 1
		  contexto.lineTo(25,25);
		  contexto.lineTo(25,v2);// aquí va la altura 2
		  contexto.fillStyle="White"
		  contexto.fill();
	}
	function limpiar(){
	var canvas = document.getElementById('miCanvas');
    var contexto = canvas.getContext('2d');
	contexto.clearRect(0, 0, canvas.width, canvas.height);
	}
    </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="limpiar()">
<br>
    <canvas id="miCanvas" style="background-color:rgba(58,58,60,1.00)" width="450" height="350">Su navegador no soporta Canvas.</canvas>
    </form>
  </body>
</html>



Comentarios sobre la versión: 0.9.1 (0)


No hay comentarios
 

Comentar la versión: 0.9.1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios

http://lwp-l.com/s3636