1

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>

2
  • Tienes que repintar toda (o gran parte) la figura cada vez, stroke() y fill() pintan sobre/dentro lo que hayas definido desde la última llamada a beginPath() Commented el 27 nov. 2018 a las 9:54
  • Entonces como lo modifico Pablo Lozando he intentado mil cosas y nada de nada... Nose como hacerlo...
    – Javichu
    Commented el 27 nov. 2018 a las 10:02

1 respuesta 1

0

Hice una función donde pongo todo lo que necesitas dibujar: dibujarTriangulo(). Si quieres puedes romper esta función en varias funciones: una para el triángulo otra para el texto ... etc.

También he declarado 3 variables más:

 var relleno = "white";
 var contorno = "black";
 var grosor = 3;

Estoy utilizando estas variables para cambiar el color de relleno y del contorno.

En los eventos, al cambiar el valor cambia la variable correspondiente y después dibujo de nuevo el triangulo con dibujarTriangulo().

Por favor observa que al inicio de esta función estoy borrando primero el canvas: ctx.clearRect(0, 0, canvas1.width,canvas1.height)

//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.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;
      
        var relleno = "white";
        var contorno = "black";
        var grosor = 3;
      
      
      function dibujarTriangulo(){
        ctx.clearRect(0, 0, canvas1.width,canvas1.height)
        
        // triangulo
        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.fillStyle = relleno;
        ctx.strokeStyle = contorno;
        ctx.lineWidth = grosor;
        ///////////////////
        ctx.fill();
        ctx.stroke();
        ctx.rotate(-3 * Math.PI / 2);
        ctx.translate(-canvas1.width / 2, -canvas1.height / 2);
        
        grosor = 3;
        
        ctx.fillStyle = "black";
        ctx.lineWidth = grosor;
        
        
        
        // Base
        ctx.beginPath();
        ctx.moveTo(160, 175);
        ctx.lineTo(180, 200);
        ctx.stroke();
        ctx.font = "bold 20px sans-serif";
        //ctx.fillStyle = relleno;
        ctx.fillText("Base", 170, 220);
        ctx.stroke();
        
        //Angulo
        ctx.beginPath();
        ctx.moveTo(125, 60);
        ctx.lineTo(60, 20);
        ctx.stroke();
        //ctx.fillStyle = relleno;
        ctx.fillText("Ángulo", 40, 20);
        ctx.stroke();
        ctx.beginPath();
        
        // arco
        var radians = (Math.PI / 180) * 60;
        ctx.save();
        ctx.setLineDash([3, 3]);
        ctx.arc(125, 25, 35, radians, 2 * radians, false);
        ctx.stroke();
        ctx.restore();
        
        // text
        ctx.fillText("Triángulo", 80, 245);
      }
        
        dibujarTriangulo();
       

        

        



        color_t1.addEventListener('change', function() {
            if (this.value) {
                contorno = '#' + this.value;
                dibujarTriangulo();
            }
        });

        color_t2.addEventListener('change', function() {
            if (this.value) {
                relleno = '#' + this.value;
                dibujarTriangulo();
            }
        });
        
       color_t3.addEventListener('change', function() {
            if (this.value) {
              
                grosor = this.value;
                dibujarTriangulo();
            }
        });
    }

    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 
<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" selected>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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.