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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。