Entrada destacada

Como usar enums en Android, kotlin

el
0

Texto con relleno degradado y sombras en Canvas

el

Veamos como dar formato al texto en canvas, en este tutorial revisaremos como poner sombras al texto y crear rellenos degradados para el texto.

Como siempre el código html es tan sencillo como crear una estructura básica de html y agregar un elemento canvas con su respectivo id y medidas.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cuadricula</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/app.js"></script>
  </head>
  <body>
    <h1>Texto en Canvas</h1>
    <canvas id="canvas1" height="300" width=350>
        Tu navegador no soporta canvas
    </canvas>
  </body>
</html>

Para que la pantalla no sea una simple página en blanco usamos los siguientes estilos CSS los cuales enlazamos en la línea 6.

style.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
 @import url(https://fonts.googleapis.com/css?family=Frijole);
 body {
   background: rgba(25, 100, 120, 0.5);
   text-align: center;
 }

 h1 {
   font-family: "Frijole";
   color: black;
   font-size: 40px;
 }

Hasta aquí ya tenemos una pagina con un fondo azul y un título pero ahora veamos como dibujar texto en el canvas usando javascript.

Como primer paso, comprobamos que la pagina se ha cargado, esto evitara que el canvas aparezca en blanco, después comprobamos que se obtenga de manera correcta el contexto de canvas.

window.onload = function() {
  var canvas = document.getElementById("canvas1");
  if (canvas && canvas.getContext) {
    var ctx = canvas.getContext("2d");
    if (ctx) {
      //Aquí va todo el código de dibujo

    } else {
      alert("No se pudo cargar el contexto");
    }
  }
}

Ahora nos centraremos en escribir código sólo en la sección encerrada por las llaves del segundo if.

La variable ctx es la que usamos para dibujar en el canvas, el siguiente es un ejemplo de como dibujar un simple texto.

window.onload = function() {
  var canvas = document.getElementById("canvas1");
  if (canvas && canvas.getContext) {
    var ctx = canvas.getContext("2d");
    if (ctx) {
      //Aquí va todo el código de dibujo
      var texto1 = "HOLA!";
      
      ctx.lineWidth = 2.0;
      ctx.font = "70px Frijole";
      ctx.strokeStyle = "Black";
      
      ctx.strokeText(texto1, 10, 70);

    } else {
      alert("No se pudo cargar el contexto");
    }
  }
}


Veamos como crear un relleno degradado para aplicarlo al texto dibujado.

Para crear un degradado tenemos dos opciones, un degradado lineal o un degradado radial, en el siguiente ejemplo usamos un degradado lineal.
Podemos usar tantos colores deseados, las posiciones son especificadas en porcentajes de 0 a 1.

Creamos un degradado con createLinearGradient y con addColorStop asignamos una posición a cada color. Usamos las coordenadas (0, 0, 0, 70) imaginando que se desea dibujar una linea vertical, entonces tendremos un degradado vertical de 70 pixeles de alto, lo cual es suficiente para rellenar el texto que también mide 70 pixeles.

Una vez creado el degradado lo asignamos a la propiedad de relleno del contexto y finalmente en lugar de usar strokeText usamos fillText  (para este ejemplo usamos los dos) para dibujar texto con relleno y no solo con bordes.

Para saber más acerca de los degradados has click Aquí.

window.onload = function() {
  var canvas = document.getElementById("canvas1");
  if (canvas && canvas.getContext) {
    var ctx = canvas.getContext("2d");
    if (ctx) {
      //Aquí va todo el código de dibujo
      var texto1 = "HOLA!";
      var gradiente = ctx.createLinearGradient(0, 0, 0, 70);
      gradiente.addColorStop(.25, "#7EFF54");
      gradiente.addColorStop(.50, "#FD9416");
      gradiente.addColorStop(.75, "#FFB81F");
      gradiente.addColorStop(1, "#7EFF54");
      
      ctx.lineWidth = 2.0;
      ctx.font = "70px Frijole";
      ctx.strokeStyle = "Black";
      ctx.fillStyle = gradiente;
      
      ctx.strokeText(texto1, 10, 70);
      ctx.fillText(texto1, 10, 70);

    } else {
      alert("No se pudo cargar el contexto");
    }
  }
}


Ahora veamos como agregar sombras, para ello configuramos las siguientes propiedades del contexto:
-shadowColor: Color de la sombra.
-shadowOffsetX: Desplazamiento de la sombra en x (negativo hacia la izquierda, positivo a la deracha).
-shadowOffsetY: Desplazamiento de la sombra en y (negativo hacia arriba, positivo hacia abajo).
-shadowBlur: Nivel de difuminado.

Una ves configuradas estás propiedades a todo lo que se dibuje en el canvas tendrá un sombreado, para controlar esto usamos los métodos save() y restore(), como se muestra a continuación solo el texto "HOLA" se dibuja con sombra mientras que a la línea de puntos ya no se le aplica.

app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
window.onload = function() {
  var canvas = document.getElementById("canvas1");
  if (canvas && canvas.getContext) {
    var ctx = canvas.getContext("2d");
    if (ctx) {
      //CONFIGURACIONES
      var texto1 = "HOLA!";
      var texto2 = "...............";
      var gradiente = ctx.createLinearGradient(0, 0, 0, 70);
      gradiente.addColorStop(.25, "#7EFF54");
      gradiente.addColorStop(.50, "#FD9416");
      gradiente.addColorStop(.75, "#FFB81F");
      gradiente.addColorStop(1, "#7EFF54");
            
      ctx.lineWidth = 2.0;
      ctx.font = "70px Frijole";
      ctx.strokeStyle = "Black";
      ctx.fillStyle = gradiente;
      
      ctx.save();
      
      ctx.shadowColor = "#254A1A";
      ctx.shadowOffsetX = 10;
      ctx.shadowOffsetY = 5;
      ctx.shadowBlur = 20;
      
      ctx.strokeText(texto1, 10, 70);
      ctx.fillText(texto1, 10, 70);
      
      ctx.restore();
      ctx.fillStyle = "#FFAE1F";
      
      ctx.fillText(texto2, 10, 150);
      ctx.strokeText(texto2, 10, 150);

    } else {
      alert("No se pudo cargar el contexto");
    }
  }
}



Ve el Pen Texto Canvas porJesus Tepec (@JesusTepec) en CodePen.




Anterior Siguiente

Comentarios

Publicar un comentario