在HTML画布上绘制一个自相交的多边形 [英] Draw a self intersecting polygon on the HTML Canvas

问题描述

我正在寻找一种绘制带有孔的自相交多边形的方法，我正在使用HTML Canvas元素.

I'm looking for a way to draw a self intersecting polygon with holes, I'm using the HTML Canvas element.

所以给定5点，我想在下面画红色的点.

So given 5 points, I want to draw the red one below.

此问题本质上是同一件事.

注意:我不想使用直线相交并添加更多点来进行此操作，我将使用的实际路径将是弯曲的.

Note: I don't want to do this using line intersections and adding more points, the actual paths I will be using will be curved.

推荐答案

在Canvas 2D中，您无法用单个路径绘制第一个五角星形-此处使用的填充规则是奇数然后Canvas使用非零缠绕规则填充形状.

You can't draw the first pentagram with a single path in Canvas 2D - the fill rule being used there is even-odd and Canvas fills shapes with the non-zero winding rule.

我认为您需要计算内部五边形的角的交点并将其分别填充.要获得用作示例的绘图，可以填充五角星形(不带描边线)，填充内部五边形(再次不带描边线)，然后绘制不填充的五边形轮廓描边.

I think you'll need to compute the intersection points for the corners of the interior pentagon and fill it separately. To achieve the drawing you use as an example, you could fill the pentagram (without stroke lines), fill the internal pentagon (again without stroke lines) then draw the pentagon outline stroke without filling.

这篇关于在HTML画布上绘制一个自相交的多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！