Código de JavaScript - Triangulo rectangulo editable con canvas

Imágen de perfil
Val: 605
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Triangulo rectangulo editable con canvasgráfica de visualizaciones


JavaScript

Actualizado el 17 de Marzo del 2018 por Humberto (35 códigos) (Publicado el 18 de Agosto del 2016)
10.458 visualizaciones desde el 18 de Agosto del 2016
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

Navegadores web compatibles, o posteriores obligatorio
Google Chrome 4.0
Internet Explorer/Edge 9.0
Firefox 2.0
Safari 3.1
Opera 9.0

Si es de tu ayuda y quieres aprender mas visita:
https://www.youtube.com/channel/UCWSKQyNDhvBVrddHIhzx5Zg?view_as=subscriber

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

Actualizado el 23 de Marzo del 2018 (Publicado el 18 de Agosto del 2016)gráfica de visualizaciones de la versión: 0.5 Actualización de Función
726 visualizaciones desde el 18 de Agosto del 2016

1.0 Actualización de Controles

Actualizado el 24 de Marzo del 2018 (Publicado el 20 de Agosto del 2016)gráfica de visualizaciones de la versión: 1.0 Actualización de Controles
880 visualizaciones desde el 20 de Agosto del 2016

2.0 Actualización de Corrección

Actualizado el 22 de Abril del 2018 (Publicado el 25 de Febrero del 2017)gráfica de visualizaciones de la versión: 2.0 Actualización de Corrección
574 visualizaciones desde el 25 de Febrero del 2017

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

Actualizado el 28 de Mayo del 2017 (Publicado el 25 de Febrero del 2017)gráfica de visualizaciones de la versión: 3.0 Actualización de Diseño
8.279 visualizaciones desde el 25 de Febrero del 2017
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
2 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...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3636