Html 如何在画布中填充已绘制的自定义形状？

我试图画自定义形状，但由于我使用moveTo..我无法填充它，所以我的问题是，有什么方法可以确定屏幕上的点来填充形状？或者为了做到这一点，我在同一块中使用或绘制了另一个真实的形状作为图层

请看我在这里的示例，以绘制一个简单的形状：

我可以用蓝色填充图像，我画了一个填充矩形，这是真的吗

填充前的形状代码：

var canvas3 = document.getElementById('canvas3'); 
        var c3 = canvas3.getContext('2d'); 
        c3.fillStyle = 'green';
        c3.beginPath();
        c3.moveTo(10,30);
        c3.lineTo(200,30);
        c3.moveTo(10,80);
        c3.lineTo(200,80);
        c3.moveTo(10,30);
        c3.lineTo(10,180);
        c3.moveTo(200,30);
        c3.lineTo(200,180);
        //c3.closePath();
        c3.fill();
        c3.lineWidth = 5;
        c3.strokeStyle = 'orange';
        c3.stroke();

填充后形状的代码：

var canvas3 = document.getElementById('canvas3'); 
        var c3 = canvas3.getContext('2d'); 
        c3.fillStyle = 'blue';
        c3.beginPath();
        c3.moveTo(10,30);
        c3.fillRect(10,30,190,60);
        c3.moveTo(10,30);
        c3.lineTo(10,180);
        c3.moveTo(10,90);
        c3.lineTo(200,90);
        c3.moveTo(200,30);
        c3.lineTo(200,180);
        c3.moveTo(10,30);
        c3.lineTo(200,30);
        //c3.closePath();
        c3.fill();
        c3.lineWidth = 5;
        c3.strokeStyle = 'orange';
        c3.stroke();

最后，我能画出这样的形状的最好方法是什么？ 注意：我是html5画布上的新手，我从中阅读

有没有办法可以在屏幕上确定点来填充 形状？或者，为了做到这一点，我最常用的方法就是在同一张纸上画另一个真实的形状 块作为层

在同一个地方画一个形状。先填后划。可能需要对画布进行一些规划，以确定绘制对象的顺序

如果计划经常重画或移动几何数据，可以定义对象以保存几何数据。这肯定会简化以后的目标

我能画出这样的形状最好的方法是什么

在我看来，这个代码可以画得更简单，代码行更少。如果可以使用简单的方法绘制形状，则无需像代码中那样将形状分成多个部分。在这种情况下，四行可以替换为一个矩形

了解这些形状是如何在内部绘制的也有助于我们利用路径a

rect（）

leaves，即在左上角闭合，以便我们可以从那里继续

例如：

var c3=c.getContext（“2d”）；
//首先填充蓝色框，因为它将位于底部
c3.rect（10,30,190,50）；//x、 y、宽度、高度
c3.fillStyle=‘蓝色’；
c3.填充（）；
//橙色笔划
//我们知道rect（）将在左上角关闭，所以从左上角继续
c3.lineTo（10180）；
c3.移动到（200，80）；//分别在右侧创建第二条腿
c3.lineTo（200180）；
c3.strokeStyle=“橙色”；
c3.线宽=5；
c3.lineJoin=c3.lineCap=“圆形”；
c3.中风（）
@AnisHikmatAbu没问题，很高兴我能帮忙：）