Html5 canvas 填充&；HTML5画布中的斯托克宽度问题

我想画一个封闭的形状（使用路径）&我的笔划宽度是10。 现在，我想填充这个形状，我可以使用上下文的fill（）函数填充它。 但是，当我想改变我的形状的alpha值时，笔划和填充区域在形状的边界重叠

我只想填补我的中风后仍然是黑色的形状区域。 我附上了解释我的问题的图片

正如您在JSFIDLE中看到的， --重叠区域的颜色为复合色。那是我不想要的。 我希望它是完全一样的边界（或笔划颜色与阿尔法）。 --我无法指定闭合路径的填充区域。（没有contexx方法。）

---

--我不能使用“glabalCompositeOperation”，因为在我的应用程序中，我在一个画布中绘制了多个形状。

您得到的效果似乎是画布如何在形状周围绘制线条的属性。线的一半厚度在形状内部绘制，一半厚度在形状外部绘制。一种方法是将填充的形状和边界绘制为单独的路径。下面显示了为您的示例执行此操作所做的更改。对于不规则形状，这将更加困难

            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            var topLeftCornerX = 188;
            var topLeftCornerY = 50;
            var width = 200;
            var height = 100;
            var linewidth = 10;

            context.globalAlpha = 0.5;
            context.beginPath();
            context.moveTo(topLeftCornerX, topLeftCornerY);
            context.lineTo(topLeftCornerX+width,topLeftCornerY);
            context.lineTo(topLeftCornerX+width,topLeftCornerY+height);
            context.lineTo(topLeftCornerX,topLeftCornerY+height);
            context.closePath();
            context.fillStyle = "#FF0000";
            context.fill();
            context.beginPath();
            context.moveTo(topLeftCornerX-linewidth/2, topLeftCornerY-linewidth/2);
            context.lineTo(topLeftCornerX+width+linewidth/2,topLeftCornerY-linewidth/2);
            context.lineTo(topLeftCornerX+width+linewidth/2,topLeftCornerY+height+linewidth/2);
            context.lineTo(topLeftCornerX-linewidth/2,topLeftCornerY+height+linewidth/2);
            context.closePath();
            context.lineWidth = linewidth;
            context.strokeStyle = "#00FF00";
            context.stroke();

---

谢谢你的回复。但就我而言，我总是需要画出复杂的路径。我找到的一个解决方案是，首先填充元素，然后使用“globalCompositeOperation=copy”在元素上划上一行。但我只会在画布上只需要一个形状时提供帮助。但在我的例子中，我已经在画布上绘制了许多形状，我需要在其他形状的顶部绘制另一个形状。我也可以画，但我需要使用临时画布并在其上绘制新形状，然后使用“drawImage”，在主画布上绘制形状。但我不想要临时画布。