HTML Canvas 直线

实例

// 创建画布：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 定义一个新路径：
ctx.beginPath();

// 定义起点：
ctx.moveTo(0, 0);

// 定义终点：
ctx.lineTo(200, 100);

// 绘制：
ctx.stroke();

亲自试一试

Canvas 线条绘制

线条绘制使用画布中的路径：

方法

beginPath() 方法开始一条新路径。它不绘制任何东西，它只是定义一条新路径。

moveTo() 定义线的起点。它不绘制任何东西，只是设置一个起点。

lineTo() 方法定义线的终点。它不绘制任何东西，只是设置一个终点。

stroke() 方法实际地绘制线条。默认笔触颜色为黑色。

lineWidth 属性

lineWidth 属性定义在画布中绘制时要使用的线条宽度。

必须在调用 stroke() 方法之前设置它。

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.stroke();

亲自试一试

strokeStyle 属性

strokeStyle 属性定义在画布中绘制时要使用的样式。

必须在调用 stroke() 方法之前设置它。

实例

ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.stroke();

亲自试一试

lineCap 属性

lineCap 属性定义线的端部样式（butt、round 或 square）。

默认为 square（方形）。

必须在调用 stroke() 方法之前设置它。

实例

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(175,75);
ctx.lineWidth = 10;
ctx.lineCap = "round";
ctx.stroke();

亲自试一试

另请参阅：

W3School 的完整 Canvas 参考手册