Question

我想绘制一个封闭的形状（使用路径）＆amp;我的笔画宽度是10。现在，我想填充该形状，我可以使用上下文的fill（）函数填充它。但是，当我想改变我的形状的alpha时，那么中风＆amp;填充区域在形状边界处重叠。

我只希望填充中风后保持黑色的形状区域。我附上解释我问题的图片。

Click here to show shape with stork & fill bug.

正如你在jsfiddle中看到的， - 重叠区域的颜色是复合颜色。我不想要。我希望它与边框（或带alpha的笔触颜色）完全相同。 - 我无法指定封闭路径的填充区域。（没有contexx的方法。） - 我不能使用“glabalCompositeOperation”，因为我在我的应用程序中在1个画布中绘制了超过1个形状。

Answer 1

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

            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();

填充和; html5画布中的笔画宽度问题

1 个答案: