Tengo una duda ya que no me pinta la figura cuando añado texto y las linias de base y altura como veis pinta pero pinta una cosa que no es lo que yo quiero ya que yo quiero que pinte el interior y el exterior del triangulo alcompleto. He intentado y no hay manera gracias.
//COMIENZA TRIANGULO
var canvas1 = document.getElementById("triangulo");
if (canvas1 && canvas1.getContext) {
var ctx = canvas1.getContext("2d");
if (ctx) {
ctx.font = "bold 20px sans-serif";
ctx.fillText("Triángulo", 80, 245);
ctx.fillStyle = "white";
ctx.strokeStyle = "black";
ctx.lineWidth = 3;
var X = 0;
var Y = 0;
var R = 100;
var L = 3;
var rad = (2 * Math.PI) / L;
ctx.translate(canvas1.width / 2, canvas1.height / 2);
ctx.rotate(3 * Math.PI / 2);
ctx.beginPath();
for (i = 0; i < L; i++) {
x = X + R * Math.cos(rad * i);
y = Y + R * Math.sin(rad * i);
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
ctx.stroke();
ctx.rotate(-3 * Math.PI / 2);
ctx.translate(-canvas1.width / 2, -canvas1.height / 2);
//gira el contexto unos 270deg
ctx.beginPath();
ctx.moveTo(160, 175);
ctx.lineTo(180, 200);
ctx.stroke();
ctx.font = "bold 20px sans-serif";
ctx.fillStyle = 'black';
ctx.fillText("Base", 170, 220);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(125, 60);
ctx.lineTo(60, 20);
ctx.stroke();
ctx.fillStyle = 'black';
ctx.fillText("Ángulo", 40, 20);
ctx.stroke();
ctx.beginPath();
var radians = (Math.PI / 180) * 60;
ctx.setLineDash([3, 3]);
ctx.arc(125, 25, 35, radians, 2 * radians, false);
ctx.stroke();
var ctx6 = document.getElementById('triangulo').getContext('2d');
document.getElementById('color_t1').addEventListener('change', function() {
if (this.value) {
ctx6.strokeStyle = '#' + this.value;
ctx6.stroke();
}
});
document.getElementById('color_t2').addEventListener('change', function() {
if (this.value) {
ctx6.fillStyle = '#' + this.value;
ctx6.fill();
ctx6.stroke();
}
});
//var canvas = document.getElementById('hexagono');
//var canvas = document.getElementById('hexagono');
var ctx6 = document.getElementById('triangulo').getContext('2d');
document.getElementById('color_t3').addEventListener('change', function() {
if (this.value) {
ctx6.lineWidth = this.value;
//ctx6.fillText("Basee", 170, 220);
ctx6.stroke();
}
});
}
function download() {
var download = document.getElementById("download");
var image = document.getElementById("triangulo").toDataURL("image/png")
.replace("image/png", "image/octet-stream");
download.setAttribute("href", image);
//download.setAttribute("download","archive.png");
}
}
//FINALIZA TRIANGULO
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
<link rel="stylesheet" href="css/canvas.css">
<title>
Página oficial en canvas
</title>
</head>
<body>
<h1 style="text-align:center">Aprende las figuras 2D i 3D</h1>
<div id="divtriangulo">
<p style="color:black; font-size: 25px; font-weight: bold;">Editar triángulo</p>
Contorno:
<select name="color_t1" id="color_t1">
<br>
<option value="ffffff">Blanco</option>
<option value="000000">Negro</option>
<option value="ff0000">Rojo</option>
<option value="00ff00">Verde</option>
<option value="0000ff">Azul</option>
</select>
<br> Relleno
<select name="color_t2" id="color_t2">
<option value="ffffff">Blanco</option>
<option value="000000">Negro</option>
<option value="ff0000">Rojo</option>
<option value="00ff00">Verde</option>
<option value="0000ff">Azul</option>
</select>
<br> Grosor línea:
<select name="color_t3" id="color_t3">
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected>3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<br>
<a id="download" download="triangulo.png"><button type="button" onClick="download()">Download</button></a>
</div>
<br>
<canvas id="triangulo" width="250" height="250">Su navegador no soporta canvas :( </canvas>
<script type="text/javascript" src="js/canvas.js"></script>
</body>
</html>