HTML 画布 文本
HTML 画布文本
要在画布上绘制文本，最重要的属性和方法是
-
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>
自己试试 »
