如何在Angular.js中使用按钮改变HTML5 Canvas的字体

在这篇文章中，我们将学习如何在AngularJS中使用按钮改变HTML5 Canvas的字体。通过点击，用户可以改变字体的属性，无论是字体大小还是字体样式。

语法:

variable.fontSize = "100px"

对于字体风格（相应改变字体风格）。

variable.font = "Comic Sans MS"

示例 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>

输出:
Before:
如何在Angular.js中使用按钮改变HTML5 Canvas的字体？
After:

示例 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>

输出:
如何在Angular.js中使用按钮改变HTML5 Canvas的字体？