📌  相关文章
📜  HTML |画布 strokeText() 方法(1)

📅  最后修改于: 2023-12-03 15:31:16.088000             🧑  作者: Mango

HTML | 画布 strokeText() 方法

简介

HTML 画布（Canvas）是 HTML5 标准新增的元素，它可以在网页中使用 JavaScript 进行图像绘制。Canvas 的 strokeText() 方法用于在 Canvas 上绘制带描边效果的文本。

语法
context.strokeText(text, x, y, [maxWidth]);

参数说明：

  • text：必需，定义要在 Canvas 上绘制的文本内容。
  • x：必需，定义文本绘制的起始位置的 x 坐标。
  • y：必需，定义文本绘制的起始位置的 y 坐标。
  • maxWidth：可选，定义文本绘制的最大宽度，超过该宽度时文本会换行。
示例

以下是一个 Canvas 绘制带描边效果文本的示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Canvas strokeText() 示例</title>
</head>
<body>
  <canvas id="myCanvas"></canvas>
  <script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    context.font = "30px Arial";
    context.strokeStyle = "red";
    context.strokeText("Hello World!", 50, 50);
  </script>
</body>
</html>
输出效果

实现以上 HTML 代码后，将会在页面上绘制出一行红色描边的 "Hello World!" 文本。如下图所示：

strokeText() 示例效果图

注意事项
  • 如果想要绘制不带描边效果的文本，则可使用 fillText() 方法。
  • 由于 strokeText() 方法会在文本周围绘制描边，因此在设置 Canvas 的宽高时需要预留足够的空间，以免文本被裁掉。