HTML Canvas 形状

实例

例子 1

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

ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
ctx.stroke();

亲自试一试

Canvas 线条绘制

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

方法

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

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

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

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

更多实例

例子 2

ctx.beginPath();

ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);

ctx.stroke();

亲自试一试

例子 3

ctx.beginPath();

ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);

ctx.stroke();

亲自试一试

提示

如果要绘制矩形，您不必绘制 4 条线。

在下一章中，您将学习使用 drawRect() 方法来绘制矩形。

strokeStyle 属性

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

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

实例

ctx.beginPath();

// 定义矩形
ctx.moveTo(20,20);
ctx.lineTo(175,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);

// 定义三角形
ctx.moveTo(100,20);
ctx.lineTo(175,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);

ctx.strokeStyle = "red";
ctx.stroke();

亲自试一试

另请参阅：

W3School 的完整 Canvas 参考手册