canvas矩形内部添加字体
时间: 2023-08-03 10:24:39 浏览: 54
要在Canvas矩形内部添加字体,您可以使用CanvasRenderingContext2D中的fillText()方法。该方法用于在Canvas上绘制填充文本。
例如,以下代码将在Canvas矩形内部添加“Hello World”文本:
```
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50);
// 添加文本
ctx.fillStyle = 'white';
ctx.font = '24px Arial';
ctx.textAlign = 'center';
ctx.fillText('Hello World', 60, 40);
```
在上面的示例中,fillText()方法的第一个参数是要绘制的文本,第二个和第三个参数是文本的x和y坐标。您可以使用textAlign属性来设置水平对齐方式,例如center或right。
请注意,如果矩形太小以至于无法容纳文本,则文本可能会被裁剪。
相关问题
canvas 矩形填充
要在 Canvas 上绘制一个填充的矩形,您可以使用 `fillRect()` 方法。以下是一个简单的示例:
```html
<canvas id="myCanvas"></canvas>
<script>
// 获取 Canvas 元素
var canvas = document.getElementById("myCanvas");
// 获取 Canvas 上下文
var ctx = canvas.getContext("2d");
// 绘制填充矩形
ctx.fillRect(50, 50, 100, 100);
</script>
```
在上面的示例中,`fillRect()` 方法将会在 (50, 50) 的位置开始绘制一个宽为 100,高为 100 的填充矩形。您可以根据需要调整参数来绘制您想要的矩形。
小程序canvas矩形圆角
可以使用canvas的arc方法来绘制圆角矩形。具体实现步骤如下:
1. 使用canvas的beginPath方法开始绘制路径。
2. 使用canvas的moveTo方法移动到矩形的左上角位置。
3. 使用canvas的lineTo方法绘制矩形的上边线。
4. 使用canvas的arcTo方法绘制矩形的右上角圆弧。
5. 使用canvas的lineTo方法绘制矩形的右边线。
6. 使用canvas的arcTo方法绘制矩形的右下角圆弧。
7. 使用canvas的lineTo方法绘制矩形的下边线。
8. 使用canvas的arcTo方法绘制矩形的左下角圆弧。
9. 使用canvas的closePath方法关闭路径。
10. 使用canvas的fill或stroke方法填充或描边矩形。
以下是一个绘制圆角矩形的示例代码:
```
function drawRoundRect(ctx, x, y, width, height, radius) {
ctx.beginPath();
ctx.moveTo(x + radius, y);
ctx.lineTo(x + width - radius, y);
ctx.arcTo(x + width, y, x + width, y + radius, radius);
ctx.lineTo(x + width, y + height - radius);
ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
ctx.lineTo(x + radius, y + height);
ctx.arcTo(x, y + height, x, y + height - radius, radius);
ctx.lineTo(x, y + radius);
ctx.arcTo(x, y, x + radius, y, radius);
ctx.closePath();
ctx.fill();
}
```