如何在 HTML5 中使用 fillText() 绘制文本?
html5web developmentfront end technology更新于 2024/5/23 2:52:17
Canvas 2D API 的 CanvasRenderingContext2D 方法 fillText() 会在给定坐标处绘制文本字符串，并使用当前的 fillStyle 填充字符。
在画布上，使用 fillText() 方法绘制填充文本。文本默认为黑色。
语法
以下是在 HTML5 中填充文本的语法
context.fillText(text, x, y, maxWidth);
其中，
X − 文本在 x 轴上的起始绘制点(以像素为单位)。
Y − 文本在 y 轴上的起始绘制点(以像素为单位)。
text − 包含应在上下文中渲染的文本字符串的字符串。
maxwidth − 文本最宽处的最大像素值。如无特殊说明，文本宽度不受限制。
为了更好地理解，让我们逐一深入研究以下示例。
使用 filltext() 方法
使用 fillText() 方法绘制的文本填充画布。文本始终显示为黑色。
示例
在下面的示例中，我们使用 filltext() 在画布上绘制所需字体的文本。
<!DOCTYPE html> <html> <body> <canvas id="canvas" height="400" width="500"></canvas> <script> const canvas = document.getElementById('canvas'); if (canvas.getContext) { const ctx = canvas.getContext('2d'); ctx.fillStyle = 'green'; ctx.font = '60px cursive'; ctx.fillText('Hello, World!', 100, 200); } </script> </body> </html>
执行上述脚本时，filltext() 会被激活，它会使用脚本中使用的字体在画布上绘制文本"hello,world!"。
添加 Linear Gradient() 函数
使用 linear-gradient() 方法将背景图像设置为线性渐变。您需要定义至少两个色标才能构建线性渐变。
示例
以下示例将使用 filltext() 和线性渐变来以彩色方式绘制文本。
<!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="150"></canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Verdana";var gradient = ctx.createLinearGradient(0, 0, c.width, 0); gradient.addColorStop("0", "magenta"); gradient.addColorStop("0.5", "blue"); gradient.addColorStop("1.0", "red"); ctx.fillStyle = gradient; ctx.fillText("TUTORIALS POINT!", 10, 90); </script> </body> </html>
当脚本执行时，线性渐变被触发并使文本"tutorialspoint!"绘制在画布上。
