¿Cómo cambiar la fuente de HTML5 Canvas usando un botón en Angular.js?

En este artículo, vamos a aprender cómo cambiar la fuente de HTML5 Canvas usando un botón en AngularJS. Con la ayuda de un clic, el usuario puede cambiar la propiedad de la fuente, ya sea el tamaño de fuente o el estilo de fuente.

Sintaxis:

Para el tamaño de fuente (cambie el tamaño de fuente en consecuencia):
```
variable.fontSize = "100px"
```
Para el estilo de fuente (cambie el estilo de fuente en consecuencia):
```
variable.font = "Comic Sans MS"
```

Ejemplo 1:

<!DOCTYPE html>
<html>
  
<head>
    <title>
      Change the font of 
      HTML5 Canvas using a button
  </title>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksForGeeks
      </h1>
        <h2>
          Change the font of HTML5 Canvas using a button
      </h2>
        <input type="button" 
               value="Change the font and also the font size" 
               onclick="increaseFontSizeBy100px()">
        
        <p id="a" style="color:green">
          GeeksForGeeks
      </p>
  
        <script>
            function increaseFontSizeBy100px() {
                document.getElementById(
                    'a').style.fontSize = "100px";
                document.getElementById(
                    'a').style.font = "69px Comic Sans MS";
            }
        </script>
    </center>
</body>
  
</html>

Salida:
Antes:

Después:

Ejemplo 2:

<html>
  
<head>
    <title>
      Change the font of 
      HTML5 Canvas using a button
  </title>
</head>
  
<body>
    <center>
        <h1 style="color:green">
          GeeksForGeeks
      </h1>
        <h2>
          Change the font of HTML5 Canvas using a button
      </h2>
  
        <input type="button"
               value="Increase the font size on each click" 
               onclick="increaseFontSizeBy1px()">
        <p id="b" style="color:green">
          GeeksForGeeks
      </p>
        
        <script>
            function increaseFontSizeBy1px() {
                var id = document.getElementById('b');
                
                var style = window.getComputedStyle(
                  id, null).getPropertyValue('font-size');
                
                var currentSize = parseInt(style);
                
                currentSize++;
                
                document.getElementById(
                  'b').style.fontSize = currentSize.toString();
  
            }
        </script>
    </center>
</body>
  
</html>

Producción:

Publicación traducida automáticamente

Artículo escrito por SohomPramanick y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta Cancelar la respuesta