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)
15.695 visualizaciones desde el 18 de Agosto del 2016
Iniciar sesiónCrear cuenta
Crear cuentaCrear cuenta(1)(1)<!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> <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>
Mejoras de esta Versión 3.0 Diseño
Se cambió el diseño de todos los controles.