HTML canvas strokeText()用法及代碼示例

我們可以使用strokeText()方法在畫布上繪製文本(不填充)，本質上可以使用當前的font，lineWidth和strokeStyle屬性在指定位置渲染指定文本，默認為文本顏色是黑色的。
用法:

context.strokeText(text, x, y, maxWidth);

參數值：：此方法接受上麵提到並在下麵描述的四個參數：

text:此參數指定將要寫在畫布上的文本。
x:此參數指定相對於畫布開始繪製文本的水平坐標。
y:此參數指定相對於畫布開始繪製文本的垂直坐標。
maxWidth:此參數指定最大可能的文本寬度。

範例1：下麵的示例說明了strokeTex()方法。

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas strokeText() Method 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">  
        GeeksforGeeks  
    </h1> 
        <h4>  
        HTML canvas strokeText() Method  
    </h4> 
        <canvas id="GFG" width="500" height="200"> 
        </canvas> 
        <script> 
            var c = document.getElementById("GFG"); 
            var ctx = c.getContext("2d"); 
            ctx.font = "60px Arial"; 
            ctx.strokeStyle = "green"; 
            ctx.strokeText("GeeksforGeeks", 50, 50); 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

範例2：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
        HTML canvas strokeText() Method 
    </title> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">  
          GeeksforGeeks  
        </h1> 
        <h4>  
          HTML canvas strokeText() Method  
        </h4> 
        <canvas id="GFG" width="500" height="200"> 
        </canvas> 
        <script> 
            var c = document.getElementById("GFG"); 
            var ctx = c.getContext("2d"); 
            ctx.font = "60px Georgia"; 
            ctx.strokeStyle = "blue"; 
            ctx.strokeText("HTML Canvas", 60, 50); 
        </script> 
    </center> 
</body> 
  
</html>

輸出：

支持的瀏覽器：下麵列出了HTML canvas strokeText()方法支持的瀏覽器：

穀歌瀏覽器
Internet Explorer 9.0
火狐瀏覽器
Opera
蘋果瀏覽器

相關用法

注：本文由純淨天空篩選整理自IshwarGupta大神的英文原創作品 HTML | canvas strokeText() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。