数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装学
法学使用 HTML5 Canvas 创建文本的属性
HTML5 canvas 元素允许动态地、通过脚本控制位图图像和二维图形的显示。位图使用低级过程模型进行更新。HTML5 Canvas 也辅助了二维游戏开发。
HTML 的 <canvas> 元素用于在网页上绘制图形。
让我们深入了解这篇文章，学习更多关于使用 HTML5 canvas 创建文本的内容。
使用 HTML5 Canvas 创建文本
使用 fillText() 或 strokeText() 方法，或两者混合使用，在 HTML "canvas" 元素上添加文本。您可以使用 font 属性（类型：字符串）提供各种文本设置，包括样式、粗细、大小和字体。可以使用斜体、粗体或标准字体样式。默认样式为普通样式。
让我们逐一查看，更清晰地了解使用 HTML5 canvas 创建文本。
使用 fillText() 方法
fillText() 函数使用当前填充样式和字体将填充文本呈现到画布上。
语法
以下是 fillText() 方法的语法。
ctx.fillText(text, x, y, maxWidth)
让我们看看下面的例子。
示例
在下面的示例中，我们使用 fillText() 方法在 <canvas> 元素上添加文本。
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
background: #82E0AA ;
width: 250;
height: 150;
}
</style>
</head>
<body>
<canvas id="tutorial"></canvas>
<script>
var canvas = document.getElementById("tutorial");
var context = canvas.getContext("2d");
context.fillStyle = "#DFFF00";
context.font = "bold 18px veranda";
context.fillText("Tutorialspoint", (tutorial.width / 2) - 17, (tutorial.height / 2) + 8);
</script>
</body>
</html>
输出
当脚本执行时，它将生成一个输出，其中包含在网页上绘制的画布以及使用 fillText() 方法在画布上写入的文本。
示例
让我们看看另一个例子，我们在这个例子中使用带有线性渐变的 fillText() 方法。
<!DOCTYPE html>
<html>
<body>
<canvas id="tutorial" width="300" height="100"></canvas>
<script>
var canvas = document.getElementById("tutorial");
if (canvas.getContext)
{
var ctx = canvas.getContext('2d');
gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
gradient.addColorStop("0.3", "#DE3163");
gradient.addColorStop("0.3", "#45B39D");
ctx.font = "italic 700 25px Unknown Font, sans-serif";
ctx.fillStyle = gradient;
for (var i = 0; i < 75; i +=30 )
{
ctx.fillText("HELLO", i, i);
}
}
</script>
</body>
</html>
输出
运行上述脚本后，它将生成一个输出，显示使用应用了线性渐变的 fillText() 方法在画布上绘制的文本。
使用 strokeText() 方法
strokeText() 方法结合当前字体、lineWidth 和 strokeStyle 属性，在指定位置生成提供的文本。
语法
以下是 strokeText() 方法的语法
ctx.strokeText(text, x, y, maxWidth);
让我们看看下面的例子。
示例
考虑下面的例子，我们使用 strokeText() 方法在 <canvas> 元素上添加文本。
<!DOCTYPE html>
<html>
<head>
<style>
#tutorial {
background: #E5E7E9 ;
}
</style>
</head>
<body>
<canvas id="tutorial" width="250" height="100"></canvas>
<script>
var canvas = document.getElementById("tutorial");
var context = canvas.getContext("2d");
context.font = "bold 30px Arial";
context.strokeText("Welcome", 50, 50);
</script>
</body>
</html>
输出
运行上述脚本后，输出窗口将弹出，显示在网页上绘制的画布以及使用 strokeText() 方法填充在画布内的文本。
184 次浏览
