HTML Canvas 线条
Canvas 线条绘制
要绘制一条线，我们使用以下方法
| 方法 | 描述 | 绘制 |
|---|---|---|
beginPath() |
声明我们准备绘制一条新路径（不进行绘制） | 否 |
moveTo(x,y) |
设置 Canvas 中线条的起始点（不进行绘制） | 否 |
lineTo(x,y) |
设置 Canvas 中线条的终点（不进行绘制） | 否 |
stroke() |
绘制线条。默认描边颜色为黑色 | 是 |
示例
定义一个起始点在位置 (0,0)，终点在位置 (200,100)。然后使用 stroke() 来实际绘制线条
<script>
// 创建一个 Canvas
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
// 定义一个新路径
ctx.beginPath();
// 设置一个起始点
ctx.moveTo(0, 0);
// 设置一个终点
ctx.lineTo(200, 100);
// 描边（进行绘制）
ctx.stroke();
</script>
自己动手试一试 »
lineWidth 属性
lineWidth 属性定义了线条的宽度。
在调用 stroke() 方法之前必须设置它。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();
</script>
自己动手试一试 »
strokeStyle 属性
strokeStyle 属性定义了线条的颜色。
在调用 stroke() 方法之前必须设置它。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();
</script>
自己动手试一试 »
lineCap 属性
lineCap 属性定义了线条的端点样式（"butt"、"round" 或 "square"）。
默认值为 "butt"。
在调用 stroke() 方法之前必须设置它。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();
</script>
自己动手试一试 »
