3

Tengo una ruleta hecha en javascript, este es el ejemplo:

<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Wheel of Fortune Design Test</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
    }
    
    canvas {
      border: 2px solid #000;
      background-color: #fff;
    }
  </style>
</head>

<body>
  <canvas id="wheelCanvas" width="500" height="500"></canvas>

  <script>
    const canvas = document.getElementById('wheelCanvas');
    const ctx = canvas.getContext('2d');
    const rad = canvas.width / 2;
    const sectors = [{
        color: '#FF5733',
        label: 'A'
      },
      {
        color: '#33FF57',
        label: 'B'
      },
      {
        color: '#3357FF',
        label: 'C'
      },
      {
        color: '#FF33A6',
        label: 'D'
      },
      {
        color: '#FFBD33',
        label: 'E'
      }
    ];
    const arc = (2 * Math.PI) / sectors.length;

    sectors.forEach((sector, index) => {
      const ang = arc * index;
      ctx.beginPath();
      ctx.fillStyle = sector.color;
      ctx.moveTo(rad, rad);
      ctx.arc(rad, rad, rad, ang, ang + arc);
      ctx.lineTo(rad, rad);
      ctx.fill();
      ctx.save();
      ctx.translate(rad, rad);
      ctx.rotate(ang + arc / 2);
      ctx.textAlign = "right";
      ctx.fillStyle = "#000";
      ctx.font = "20px Arial";
      ctx.fillText(sector.label, rad - 10, 10);
      ctx.restore();
    });
  </script>
</body>

</html>

Y el resultado del código es este, es muy básico el diseño, solo es para poner en práctica los dibujos en canvas:

introducir la descripción de la imagen aquí

Lo que requiero es que cada sector, dentro de cada uno, se dibuje un triángulo isósceles de color negro con transparencia de .4 y se adapte al tamaño del sector, esto con el fin de que agarre cualquier tono de color. quiero hacer algo parecido a esto, pero refiriéndome sólo al triángulo dentro de los sectores de la ruleta, como lo puedo hacer en javascript?:

introducir la descripción de la imagen aquí

1
  • Matemáticas e imaginación. Dibujar en canvas no es muy diferente a hacerlo en Photoshop u otro programa de dibujo.
    – Mateo
    Commented el 21 ago. a las 15:18

1 respuesta 1

1

Lo que puedes hacer es modificar un poco tu código y seguir con la lógica de beginPath(), lo cual hace que te dibuje un triángulo y al final el círculo. Aquí dejo el código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wheel of Fortune Design Test</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
       }
       canvas {
            border: 2px solid #000;
            background-color: #fff;
       }
    </style>
</head>
<body>
    <canvas id="wheelCanvas" width="500" height="500"></canvas>

    <script>
        const canvas = document.getElementById('wheelCanvas');
        const ctx = canvas.getContext('2d');
        const rad = canvas.width / 2;
        const smallRad = rad * 0.1;  // Radio del círculo pequeño en el centro
        const triangleBaseRad = rad * 0.1;  // Distancia de la base del triángulo desde el centro
        const triangleTipRad = rad * 0.3;  // Distancia de la punta del triángulo desde el centro
        const sectors = [{ 
                          color: '#FF5733', 
                          label: 'A' 
                         },
                         { 
                         color: '#33FF57', 
                         label: 'B' 
                         },
                         { 
                         color: '#3357FF', 
                         label: 'C' 
                         },
                         {
                         color: '#FF33A6', 
                         label: 'D' 
                         },
                         {
                         color: '#FFBD33', 
                         label: 'E' 
                         }
        ];
        const arc = (2 * Math.PI) / sectors.length;

        sectors.forEach((sector, index) => {
            const ang = arc * index;
            ctx.beginPath();
            ctx.fillStyle = sector.color;
            ctx.moveTo(rad, rad);
            ctx.arc(rad, rad, rad, ang, ang + arc);
            ctx.lineTo(rad, rad);
            ctx.fill();

            // Dibujar el triángulo isósceles apuntando hacia afuera
            ctx.beginPath();
            ctx.fillStyle = 'rgba(0, 0, 0, 0.4)'; // Negro con transparencia
            ctx.moveTo(
                rad + triangleBaseRad * Math.cos(ang), 
                rad + triangleBaseRad * Math.sin(ang)
            );
            ctx.lineTo(
                rad + triangleTipRad * Math.cos(ang + arc / 2), // Punta del triángulo ajustado
                rad + triangleTipRad * Math.sin(ang + arc / 2)
            );
            ctx.lineTo(
                rad + triangleBaseRad * Math.cos(ang + arc), 
                rad + triangleBaseRad * Math.sin(ang + arc)
            );
            ctx.closePath();
            ctx.fill();
            ctx.save();
            ctx.translate(rad, rad);
            ctx.rotate(ang + arc / 2);
            ctx.textAlign = "right";
            ctx.fillStyle = "#000";
            ctx.font = "20px Arial";
            ctx.fillText(sector.label, rad - 10, 10);
            ctx.restore();
        });

        // Dibujar el círculo central
        ctx.beginPath();
        ctx.arc(rad, rad, smallRad, 0, 2 * Math.PI);
        ctx.fillStyle = '#000';
        ctx.fill();
    </script>
</body>
</html>

Saludos!!

2
  • Muchas gracias por tu ayuda y tiempo, me ayudo bastante eso tu logica y lo aplique y le agregue mas triangulos y degradados, gracias de nuevo :)
    – Israel
    Commented el 21 ago. a las 19:23
  • @Israel, si la respuesta te ayudo a solucionar tu problema, considera votarla y/o marcarla como aceptada. Saludos!
    – Marcos
    Commented el 22 ago. a las 15:25

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.