I can not paint the inside and outside color on canvas of a figure

Question

I can not paint the inside and outside color on canvas of a figure

Navigation

#1 by (0 votes)

1

I have a doubt since I do not paint the figure when I add text and the lines of base and height as you can see but it paints a thing that is not what I want since I want it to paint the inside and the outside of the triangle full. I have tried and there is no way thank you.

//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>

html css canvas

asked by Javichu 27.11.2018 в 10:29

source

1 answer

Problem with positioning a chat I need to send an array to a separate array for each time I click on an item in a listbox

score 0 · Answer 1

I did a function where I put everything you need to draw: dibujarTriangulo() . If you want you can break this function in several functions: one for the triangle another for the text ... etc.

I have also declared 3 more variables:

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

I am using these variables to change the fill color and the outline color.

In the events, changing the value changes the corresponding variable and then drawing the triangle again with dibujarTriangulo() .

Please note that at the beginning of this function I am first deleting the 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>