Leon Sans de Jongmin Kim

Leon Sans es una fuente increíble. Un sans-serif geométrico hecho completamente en código (javascript) por Jongmin Kim. Cada punto de dibujo tiene valores de coordenadas que puedes modificar para crear formas, efectos o animaciones personalizadas.
Permite manipularla como una fuente variable, para cambiar el peso de la fuente dinámicamente. Pero además, puedes crear animaciones, efectos o formas personalizadas en el elemento HTML5 <canvas>
. Diseñó la fuente para celebrar el nacimiento de su bebé León.
Ejemplos



Vea más ejemplos en el repositorio de Github de Leon Sans o en el sitio web leon-kim.com/examples/
Comprueba, por ejemplo, el efecto de la lluvia.
Uso
Descargue el archivo js minificado en la carpeta dist e inclúyalo en su html
<script src="js/leon.js"></script>
Genera LeonSans y lo dibuja en el elemento Canvas de HTML5.
this.canvas = document.createElement('canvas'); document.body.appendChild(this.canvas); this.ctx = this.canvas.getContext("2d"); this.leon = new LeonSans({ text: 'The quick brown\nfox jumps over\nthe lazy dog', color: ['#000000'], size: 160, weight: 200 }); requestAnimationFrame(animate); function animate(t) { requestAnimationFrame(animate); this.ctx.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight); const x = (document.body.clientWidth - this.leon.rect.w) / 2; const y = (document.body.clientHeight - this.leon.rect.h) / 2; this.leon.position(x, y); this.leon.draw(this.ctx); }
Lista de opciones
Nombre | Tipo | Descripción |
---|---|---|
text
| cadena | El texto que debe mostrarse. |
size
| entero | El tamaño del texto. |
weight | número | El peso de la fuente: 1 - 900 . [Por defecto: 1 ] |
color | matriz | Los colores de cada personaje. [Por defecto: ['#000000'] ] |
colorful | matriz | Los colores para el efecto de color. [Por defecto: ['#c5d73f', '#9d529c', '#49a9db', '#fec330', '#5eb96e', '#fc5356', '#f38f31'] ] |
tracking | entero | El espacio entre los caracteres de un bloque de texto. [Por defecto: 0 ] |
leading | entero | La distancia entre cada línea de texto. [Por defecto: 0 ] |
align | cadena | Cómo se alinea horizontalmente el contenido del texto del elemento: left, center, right . [Por defecto: left ] |
pathGap | número | El espacio entre cada coordenada de los puntos de una línea de cada carácter: 0 - 1 . [Por defecto: 0.5 ] |
amplitude | número | La amplitud del efecto de la onda: 0 - 1 . [Por defecto: 0.5 ] |
maxWidth
| número | La anchura de la frase de texto. |
breakWord | booleano | Las palabras se rompen al llegar al final de una línea. [Por defecto: false ] |
fps | número | El FPS para el efecto de onda. [Por defecto: 30 ] |
isPath | booleano | true para obtener los valores de las coordenadas de los puntos de una línea de cada carácter. [Por defecto: false ] |
isWave | booleano | true para el efecto de las olas. [Por defecto: false ] |
Propiedades
Nombre | Tipo | Descripción |
---|---|---|
lineWidth
| número | El grosor de las líneas del personaje. |
scale | número | La escala del carácter. scale es 1 cuando el tamaño de la fuente es 500 . |
drawing | array | Los valores del objeto de dibujo para cada personaje. 0 es el comienzo de la animación, 1 es el final del estado de la animación. |
data
| matriz | Un objeto de los datos brutos del texto. |
paths
| matriz | Los valores de las coordenadas de los puntos de una línea de cada carácter. |
drawingPaths | matriz | Los valores de las coordenadas de los puntos de una línea de cada personaje para dibujar la animación en WebGL. Tiene 1px de distancia de cada camino. |
wavePaths
| array | Los valores de las coordenadas de los puntos de una línea para el efecto de la onda. |
rect
| Objeto | El tamaño del texto y su posición: {x: x position, y: y position, w: width, h: height} . |
Métodos
Nombre | Descripción |
---|---|
on() | Añade el evento update . |
off() | Eliminar el evento update . |
position(x, y) | Establece la posición del texto. |
updateDrawingPaths() | Actualizar las rutas para dibujar en WebGL (PIXI.js). Es muy caro, sólo llama cuando lo necesita. |
drawPixi(graphics) | Dibujar texto en WebGL con PIXI.js. |
draw(ctx) | Dibuja el texto en el elemento Canvas. |
drawColorful(ctx) | Dibuja el efecto de color. |
wave(ctx, t) | Dibuja el efecto de las olas. |
pattern(ctx, w, h) | Dibujar formas rectangulares en cada punto de la trayectoria |
grid(ctx) | Dibujar la cuadrícula para cada tipo. |
point(ctx) | Dibuja círculos en cada punto de dibujo y líneas para cada tipo. |
box(ctx) | Dibuja un cuadro de contorno para el texto. |
reset() | Restablece todos los valores. |
destroy() | Destruye. |