HTML Canvas 文本
HTML Canvas 文本
要在画布上绘制文本，最重要的属性和方法是
-
font- 定义文本的字体属性 -
fillText()- 绘制“填充”文本 -
strokeText()- 绘制“描边”文本（无填充）
font 属性
font 属性定义要使用的字体和字体大小。
此属性的默认值为“10px sans serif”。
fillText() 方法
fillText() 方法用于绘制“填充”文本。
fillText() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| text | 必需。要绘制的文本字符串 |
| x | 必需。字符串起始点的 x 坐标 |
| y | 必需。字符串起始点的 y 坐标 |
| maxWidth | 可选。文本字符串的最大宽度 |
示例
将字体设置为 50px“Arial”，并在画布上写入填充文本。从 (10,80) 位置开始
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.fillText("Hello World",10,80);
</script>
自己动手试一试 »
strokeText() 方法
strokeText() 方法用于绘制“描边”文本。
strokeText() 方法具有以下参数
| 参数 | 描述 |
|---|---|
| text | 必需。要绘制的文本字符串 |
| x | 必需。字符串起始点的 x 坐标 |
| y | 必需。字符串起始点的 y 坐标 |
| maxWidth | 可选。文本字符串的最大宽度 |
示例
将字体设置为 50px“Arial”，并在画布上写入描边文本。从 (10,80) 位置开始
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "50px Arial";
ctx.strokeText("Hello World",10,80);
</script>
自己动手试一试 »
示例
为字体添加粗体和斜体
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.font = "bold italic 50px Arial";
ctx.strokeText("Hello World",10,80);
</script>
自己动手试一试 »
