Código de JavaScript - Triangulo rectangulo editable con canvas

Imágen de perfil

Triangulo rectangulo editable con canvasgráfica de visualizaciones


JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 05 de Marzo del 2017 por Humberto (Creado el 18 de Agosto del 2016)
2.300 visualizaciones desde el 18 de Agosto del 2016. Una media de 56 por semana
El código lo que hace es dibujar un triángulo rectángulo con las medidas que le has dado (pixeles). Además de otras funciones: dibujar, limpiar y descargar.

Captura

Requerimientos

Tener un navegador de internet actualizado y que soporte canvas
.

0.5 Actualización de Función
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 25 de Febrero del 2017 (Creado el 18 de Agosto del 2016)gráfica de visualizaciones de la versión: 0.5 Actualización de Función
290 visualizaciones desde el 18 de Agosto del 2016. Una media de 7 por semana

1.0 Actualización de Controles

Actualizado el 27 de Febrero del 2017 (Creado el 20 de Agosto del 2016)gráfica de visualizaciones de la versión: 1.0 Actualización de Controles
651 visualizaciones desde el 20 de Agosto del 2016. Una media de 21 por semana

2.0 Actualización de Corrección

Actualizado el 03 de Marzo del 2017 (Creado el 25 de Febrero del 2017)gráfica de visualizaciones de la versión: 2.0 Actualización de Corrección
115 visualizaciones desde el 25 de Febrero del 2017. Una media de 7 por semana

3.0 Actualización de Diseño
estrellaestrellaestrellaestrellaestrella(1)

Actualizado el 28 de Mayo del 2017 (Creado el 25 de Febrero del 2017)gráfica de visualizaciones de la versión: 3.0 Actualización de Diseño
1.245 visualizaciones desde el 25 de Febrero del 2017. Una media de 77 por semana
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

---------------------

Mejoras de esta Versión 3.0 Diseño

---------------------
Se cambió el diseño de todos los controles.
Captura
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!Doctype html>
  <html>
  <head>
  <title>Triángulo editable en Canvas</title>
  </head>
  <style type="text/css">
	  body{
		  background-color: #F1F1F1;
	  }
	  form {
		  padding: 0;
		  margin:10px 30px ;
		  background-color: white;
	  }
	  *{
		  margin: 0;
		  padding: 0;
		  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	  }
	  input[type=button]{
		  text-decoration:none;
		  border-color: rgba(0, 0, 0, 0.00);
		  font-size: 20px;
		  color: #fff;
		  cursor: pointer;
		  display: inline-block;
		  border-radius: 5px;
		  height: 32px;
		  width: 235px;
		  background-color: #11B547;
	  }
	  /* boton al clickearlo sobre el */
	  input[type=button]:active{
		  background-color:rgba(0,0,0,0.00);
		  color: #11B547;
	  }
	  /*este espara que el imput number se le quite las flechitas*/
	  input[type=number]::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}/*google chrome y safari*/
	  input[type=number]::-o-inner-spin-button{-o-appearance: none;margin: 0;}/*opera*/
	  input[type=number]::-moz-inner-spin-button{-moz-appearance:none;margin: 0;}/* firefox*/
	  input[type=number] {-moz-appearance:textfield; margin:5px;}/*firefox firefox 29*/
	  input[type=number]::-ms-inner-spin-button{-ms-appearance: none;margin: 0;}/*internet explorer*/
	  input[type=number] {
		  cursor: text;
		  text-indent: 5px;
		  width: 355px;
		  font-size: 20px;
		  height: 30px;
		  border-radius: 5px;
		  margin: 0;
		  background: linear-gradient(#342E21, #483F2E);
		  box-shadow: 0px 0px 0px 0px #483F2E inset;
		  padding: 0px;
		  border: none;
		  color: #fff;
	  }
	  header{
		  background-color: #fff;
		  width: 100%;
		  height: 50px;
 
	  }
	  header span{
		  float: left;
		  vertical-align:bottom;
		  font-size:35px;
	  }
	  </style>
  <body>
	  <center>
		    <header><span>&nbsp;<img src="ico.png" width="45px">Comenzando</span></header>
  <form name="f1">
	  <h1>Triangulo Editable en Canvas</h1>
	  <input type="number" name="txtn1" autocomplete="off" placeholder="Horizontal">
	  <input type="number" name="txtn2" autocomplete="off" placeholder="Vertical">
	  <br><br>
	  <canvas id="miCanvas" width="720" height="450">Su navegador no soporta Canvas.</canvas>
	  <br>
	  <center>
	  <input type="button" value="Dibujar" onclick="dibujar()">
	  <input type="button" value="Limpiar" onclick="limpiar()">
 
	  <a id="download" download="Triangulo.png">
	  <input type="button" value="Descargar" onClick="descargar()">
	  </a>
 
	  </center>
	  <br>
	  </form>
	  </center>
  <script type="text/javascript">
		  //variables para llegar a el canvas --->
		  var canvas = document.getElementById("miCanvas");
		  var contexto = canvas.getContext("2d");
		  function colorfondo() {
			  //Lo vuelve a crear el fondo gris --->
			  contexto.fillStyle = "#3A3A3A";
			  //crea el fondo del tamaño ancho y alto del canvas --->
			  contexto.fillRect(0, 0, canvas.width, canvas.height);
		  }
		  colorfondo()
		  function descargar(){
                if (canvas.msToBlob){ //para internet explorer
                var blob = canvas.msToBlob();
                window.navigator.msSaveBlob(blob, "Triangulo.png");
            } else {
                link = document.getElementById("download");
                //otros navegadores
                link.href = canvas.toDataURL();
            }
		  }
		  function limpiar() {
			  // limpia los campos de texto --->
			  document.f1.reset();
			  colorfondo();
		  }
		  function dibujar() {
			  //variables para llegar a el canvas --->
			  colorfondo();
			  //variable para lo ancho --->
			  var n1 = document.f1.txtn1.value;
			  var v1 = parseInt(25) + parseInt(n1);
			  //variable para lo alto --->
			  var n2 = document.f1.txtn2.value;
			  var v2 = parseInt(25) + parseInt(n2);
			  contexto.beginPath();
			  // 25 es de posición de margen
			  contexto.moveTo(v1, 25); //aquí va la anchura 1
			  contexto.lineTo(25, 25);
			  contexto.lineTo(25, v2); // aquí va la altura 2
			  //color del triángulo --->
			  contexto.fillStyle ="#fff"
			  contexto.fill();
		  }
    </script>
  </body>
</html>



Comentarios sobre la versión: 3.0 Actualización de Diseño (1)

Imágen de perfil
ScriptShow
02 de Marzo del 2017
estrellaestrellaestrellaestrellaestrella
No ha dejado ningún comentario
Responder

Comentar la versión: 3.0 Actualización de Diseño

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

http://lwp-l.com/s3636