html text-stoke,HTML canvas strokeText()用法及代码示例

我们可以使用strokeText()方法在画布上绘制文本(不填充)，本质上可以使用当前的font，lineWidth和strokeStyle属性在指定位置渲染指定文本，默认为文本颜色是黑色的。

用法:

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

参数值：：此方法接受上面提到并在下面描述的四个参数：

text:此参数指定将要写在画布上的文本。

x:此参数指定相对于画布开始绘制文本的水平坐标。

y:此参数指定相对于画布开始绘制文本的垂直坐标。

maxWidth:此参数指定最大可能的文本宽度。

范例1：下面的示例说明了strokeTex()方法。

HTML canvas strokeText() Method

GeeksforGeeks

HTML canvas strokeText() Method

var c = document.getElementById("GFG");

var ctx = c.getContext("2d");

ctx.font = "60px Arial";

ctx.strokeStyle = "green";

ctx.strokeText("GeeksforGeeks", 50, 50);

输出：

范例2：

HTML canvas strokeText() Method

GeeksforGeeks

HTML canvas strokeText() Method

var c = document.getElementById("GFG");

var ctx = c.getContext("2d");

ctx.font = "60px Georgia";

ctx.strokeStyle = "blue";

ctx.strokeText("HTML Canvas", 60, 50);

输出：

支持的浏览器：下面列出了HTML canvas strokeText()方法支持的浏览器：

谷歌浏览器

Internet Explorer 9.0

火狐浏览器

Opera

苹果浏览器