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

Question

我尝试绘制自定义形状，但由于我使用 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 画布的新手，我从 this online book 阅读。

Answer 1

有什么方法可以确定屏幕上的点来填充 形状？或为此我最常使用或绘制另一个真实形状 块作为层

只需在同一个地方画一个形状。先填充，后描边。可能需要对画布进行一些规划，以了解绘制的顺序。

如果您打算经常重绘或移动它们，您可以定义对象来保存几何数据。这肯定会在以后简化目标。

我可以画出这样的形状最好的方法是什么？

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

了解这些形状是如何在内部绘制的也有助于我们利用 rect() 离开的路径，即关闭左上角，以便我们可以从那里继续。

例如：

var c3 = c.getContext("2d");

// fill blue box first as it will be at the bottom
c3.rect(10, 30, 190, 50);  // x, y, width, height
c3.fillStyle = 'blue';
c3.fill();

// orange stroke
// we know rect() will close at upper-left corner so continue from there with left leg
c3.lineTo(10, 180);
c3.moveTo(200, 80);        // create second leg at right separately
c3.lineTo(200, 180); 

c3.strokeStyle = "orange";
c3.lineWidth = 5;
c3.lineJoin = c3.lineCap = "round";
c3.stroke();

<canvas id=c height=180></canvas>

另一种方法是填充然后构建行路径：

var c3 = c.getContext("2d");

c3.fillStyle = 'blue';
c3.fillRect(10, 30, 190, 50); // fillRect does not add to path

// orange stroke
c3.moveTo(10, 180);           // create "housing" starting at bottom-left corner
c3.lineTo(10, 30);            // upper-left
c3.lineTo(200, 30);           // upper-right
c3.lineTo(200, 180);          // bottom-right

c3.moveTo(10, 80);            // add cross-bar
c3.lineTo(200, 80); 

c3.strokeStyle = "orange";
c3.lineWidth = 5;
c3.lineJoin = c3.lineCap = "round";
c3.stroke();

<canvas id=c height=180></canvas>