canvas 绘制文字
时间: 2023-08-03 12:13:17 浏览: 49
在Canvas上绘制文字可以使用`fillText()`或`strokeText()`方法,它们都接收三个参数:要绘制的文本、文本的x坐标和y坐标。下面是一个简单的例子:
```javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
```
在这个例子中,我们首先获取了Canvas元素和它的2D上下文。然后,我们使用`font`属性设置字体大小和字体类型。最后,我们使用`fillText()`方法在(10, 50)的位置绘制了一段文本。
除了`fillText()`和`strokeText()`方法外,还有一些其他的方法可以用于处理文本,例如`measureText()`方法可以用于获取文本的宽度。下面是一个完整的例子,演示了如何在Canvas上绘制带有阴影的文本:
```javascript
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillStyle = "white";
ctx.shadowColor = "black";
ctx.shadowBlur = 5;
ctx.fillText("Hello World", 10, 50);
var textWidth = ctx.measureText("Hello World").width;
ctx.fillRect(10, 60, textWidth, 5);
```
在这个例子中,我们首先绘制了一段带有阴影的文本。然后,我们使用`measureText()`方法获取文本的宽度,并在文本下面绘制了一条矩形,用于突出显示文本。