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>Triángulo editable en Canvas</title>
</head>
<body>
<center>
<form id="f1" 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(){
var download = document.getElementById("download");
var image = document.getElementById("miCanvas").toDataURL("image/png").replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archivo.png");
}function clearcanvas() {
//elimina todo lo del canvas --->
contexto.clearRect(0, 0, canvas.width, canvas.height);
}function limpiar() {
// limpia los campos de texto --->
document.getElementById("f1").reset();
clearcanvas();
colorfondo();
}function dibujar() {
//variables para llegar a el canvas --->
clearcanvas();
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>
No hay comentarios
(1)
Mejoras de esta Versión 0.98
• Se puede cambiar el tamaño del triángulo sin tener que darle a limpiar a cada que dabas calcular.
• Al guardar la imagen se puede ver que el fondo gris se cambia.