HTML Canvas 形状
Canvas 形状
要绘制由直线组成的各种形状，我们使用以下方法
| 方法 | 描述 | 绘制 |
|---|---|---|
beginPath() |
声明我们即将开始绘制一条新路径（不进行绘制） | 否 |
moveTo(x,y) |
在 canvas 中设置形状的起点（不进行绘制） | 否 |
lineTo(x,y) |
设置形状的子点或终点（不进行绘制） | 否 |
stroke() |
绘制线条（从起点，通过子点到终点）。默认的描边颜色是黑色 | 是 |
示例
<script>
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();
</script>
自己动手试一试 »
更多示例
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.stroke();
</script>
自己动手试一试 »
strokeStyle 属性
strokeStyle 属性定义了描边的颜色。
它必须在调用 stroke() 方法之前设置。
示例
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
// 定义一个矩形
ctx.moveTo(20,20);
ctx.lineTo(180,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(20,20);
// 定义一个三角形
ctx.moveTo(100,20);
ctx.lineTo(180,100);
ctx.lineTo(20,100);
ctx.lineTo(100,20);
ctx.strokeStyle = "red";
ctx.stroke();
</script>
自己动手试一试 »
