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
Iniciar sesiónCrear cuenta
Crear cuentaCrear cuenta(1)<!Doctype html>
<html>
<head>
<title>poner al canvas</title>
</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()">
<button class="button"><a id="download" download="Triangulo.png" target="_blank">Descargar</a></button>
<br>
<canvas id="miCanvas" style="background-color:rgba(58,58,60,1.00)" width="450" height="350">Su navegador no soporta Canvas.</canvas>
</form>
<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);
}var download = document.getElementById("download");
download.addEventListener("click", function() {
var image = document.getElementById("miCanvas").toDataURL("image/png").replace(/^data:image\/[^;]/, 'data:application/octet-stream');
download.setAttribute("href", image);
});
</script>
</body>
</html>
No hay comentarios
(1)
-botón limpiar
-estilo en el canvas
-triángulo blanco