帮我用canvas 画一条垂线

好的，以下是用 Canvas 画一条垂线的代码：

// 获取 Canvas 元素
const canvas = document.querySelector('canvas');

// 获取 Canvas 2D 上下文
const ctx = canvas.getContext('2d');

// 设置线条颜色和宽度
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;

// 画一条垂线
ctx.beginPath();
ctx.moveTo(50, 0);
ctx.lineTo(50, 100);
ctx.stroke();

上述代码中，我们首先获取了页面中的 Canvas 元素，并通过 `getContext` 方法获取了 Canvas 2D 上下文。然后，我们设置了线条的颜色和宽度，接着使用 `beginPath` 方法开始一段新的路径，并使用 `moveTo` 方法将起始点移动到 (50, 0) 的位置，再使用 `lineTo` 方法将终点移动到 (50, 100) 的位置，最后使用 `stroke` 方法将路径画出来，即可得到一条垂线。

相关问题

帮我用 canvas 制作一个顶牌，要求：顶部矩形带边框放文字，矩形底部中间是垂线

好的，以下是一个简单的实现方式：

<canvas id="myCanvas" width="200" height="150"></canvas>

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 顶部矩形
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, 50);
ctx.strokeStyle = "#000";
ctx.strokeRect(0, 0, canvas.width, 50);

// 文字
ctx.fillStyle = "#000";
ctx.font = "24px Arial";
ctx.textAlign = "center";
ctx.fillText("顶牌", canvas.width / 2, 30);

// 垂线
ctx.beginPath();
ctx.moveTo(canvas.width / 2, 50);
ctx.lineTo(canvas.width / 2, canvas.height);
ctx.strokeStyle = "#000";
ctx.stroke();

效果图如下：