Gráfico de araña - Hexágono o polígono de habilidades

Este simple script explota las capacidades del objeto canvas, estándar a partir de html5, para dibujar un gráfico de araña configurable hasta cierto punto.

Para guardar el resultado como una imagen PNG sólo hay que hacer clic derecho y luego "Guardar imagen como".

ERROR: Tu navegador no soporta el objeto canvas.

Nota: la resolución afecta sólo al tamaño de la imagen descargada.

Resolución: x

Margen (aumenta el margen y la resolución si los textos salen recortados):

Rotación (grados en sentido horario):

Nombre de la tipografía (web safe o cualquiera que tengas instalada en tu sistema operativo, no encierres el nombre entre comillas. Ejemplo: si estás en Linux Ubuntu, seguramente tengas la fuente Ubuntu instalada, puedes probar a escribir Ubuntu) (ADVERTENCIA: en Firefox, y posiblemente otros, por alguna razón, la carga de fuentes que no son estándar web no funciona si estás en modo PRIVADO. No hay problema en modo normal):

Tamaño de la tipografía:

Color de la tipografía:

Color de línea:

Color de línea de parámetro:

Color de relleno de parámetro:

Color de fondo:

Fondo transparente

Nota: El fondo transparente sólo se aprecia al descargar la imagen.

Variables: 3 4 5 6 7 8 9 10

Copia la dirección de abajo para poder recuperar el estado del canvas tal cual lo dejaste. O presiona el botón "Actualizar" de arriba para que la url del blog se actualice, entonces podrás agregarla a marcadores y volver a recuperar el canvas tal cual lo dejaste. Nota: nada te impide realizar este proceso varias veces, y cada vez obtendrás una url diferente que podrás guardar en marcadores. Nada de esto funcionara en navegadores desactualizados.

Historia

Como habrán notado lo hice con el propósito de ser usado durante la planeación de un videojuego. Pero tiene otras utilidades también.

Al principio intenté crear estos hexágonos con Inkscape, pero pronto me di cuenta que llevaba demasiado tiempo. Así fue como se me ocurrió esta idea de usar el objeto canvas. Una vez que estuvo estable, me di cuenta que para compartirlo en mi blog sólo tenía que copiar y pegar el script, así que no había excusa para no compartir. Disfruten.

Al principio la función que dibuja el polígono tenía hardcodeado el número 6 como lados para el polígono, o sea sólo se permitían hexágonos. En mi caso era la figura que necesitaba. Pero para generalizarlo para el público, puede ocurrir que necesiten 5 u 8, por ejemplo. Era sólo cuestión de permitir especificar el número de lados, ya que el algoritmo es el mismo. Se permite un mínimo de 3 lados por razones obvias, y máximo de 10 por el tamaño de la fuente, que para no complicar no agregué la posibilidad de especificar ni fuente ni tamaño de fuente.

En caso de que estén usando un navegador incompatible, dejo una captura de lo que tendrían que ver al principio de la entrada.