Canvas 带有MoveTo和LineTo的画布填充样式

我正在画布上画一个形状，但我无法填充它idk为什么：v 我想用任何颜色填充矩形内的形状

HTML:

---

这是因为您多次使用

moveTo（）

方法，这会中断对上一行点的引用

此外，在绘制矩形之前，应该使用

beginPath（）

方法

var ctx=document.getElementById（“canvas”）.getContext（“2d”）；
变量大小=200；
ctx.beginPath（）；
ctx.rect（500,50200200）；
ctx.stroke（）；
ctx.beginPath（）；
ctx.moveTo（530100）；
ctx.lineTo（550140）；
ctx.lineTo（570100）；
ctx.lineTo（550120）；
ctx.closePath（）；
ctx.lineWidth=2
ctx.fillStyle=“红色”；
ctx.fill（）

var ctx = document.getElementById("canvas").getContext("2d");
var size = 200;

ctx.rect(500, 50, 200, 200);
ctx.stroke();

ctx.lineWidth = 2
ctx.strokeStyle = "red";
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(530, 100);
ctx.lineTo(550, 140);

ctx.moveTo(550, 140);
ctx.lineTo(570, 100);

ctx.moveTo(570, 100);
ctx.lineTo(550, 120);

ctx.moveTo(530, 100);
ctx.lineTo(550, 120);

ctx.closePath();
ctx.fill();
ctx.stroke();