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

在本文中，我们将学习如何使用AngularJS中的按钮更改HTML5 Canvas的字体。借助单击字体，用户可以更改字体属性，无论是字体大小还是字体样式。

句法：

• 对于字体大小(相应地更改字体大小)：

  variable.fontSize = "100px"

• 对于字体样式(相应地更改字体样式)：

  variable.font = "Comic Sans MS"

范例1：

  

    
      Change the font of 
      HTML5 Canvas using a button
  

  

    
        
          GeeksForGeeks
      
        
          Change the font of HTML5 Canvas using a button
      
        
        
        
          GeeksForGeeks
      
  
        
            function increaseFontSizeBy100px() {
                document.getElementById(
                    'a').style.fontSize = "100px";
                document.getElementById(
                    'a').style.font = "69px Comic Sans MS";
            }
        
    

  

输出：
前：

后：

范例2：

  

    
      Change the font of 
      HTML5 Canvas using a button
  

  

    
        
          GeeksForGeeks
      
        
          Change the font of HTML5 Canvas using a button
      
  
        
        
          GeeksForGeeks
      
        
        
            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();
  
            }
        
    

  

输出：