草庐IT

多边形

全部标签

javascript - 在 HTML Canvas 上绘制自相交多边形

我正在寻找一种方法来绘制带孔的自相交多边形,我正在使用HTMLCanvas元素。所以给定5个点,我想画下面的红色点。Thisquestionisessentiallythesamething.注意:我不想使用线交点和添加更多点来执行此操作,我将使用的实际路径将是弯曲的。 最佳答案 您不能在Canvas2D中使用单一路径绘制第一个五Angular星-那里使用的填充规则是奇偶数,并且Canvas使用非零填充形状strong>缠绕规则。我认为您需要计算内部五边形Angular的交点并单独填充它。为了实现您用作示例的绘图,您可以填充五Ang

javascript - HTML5 Canvas ,多边形上/多边形中的图像可能吗?

有没有办法使用javascripthtml5canvas来创建一个多边形,然后在其中显示图像而不是颜色? 最佳答案 经过一些研究,我相信首先使用您的图像创建一个图案,然后将该图案设置为fillStyle可以做到这一点:varctx=canvas.getContext("2d");varpattern=ctx.createPattern(imageObj,"repeat");ctx.fillStyle=pattern;然后只需创建多边形(使用moveTo和lineTo)然后正常填充它即可。来源:thisplugin的源代码。免责声明:

html - 带虚线边框的 CSS3 六边形

我可以实现如下所示的具有实心边框的六边形:.hex{margin-top:70px;width:208px;height:120px;background:red;position:relative;}.hex:before,.hex:after{content:"";border-left:104pxsolidtransparent;border-right:104pxsolidtransparent;position:absolute;}.hex:before{top:-59px;border-bottom:60pxsolidred;}.hex:after{bottom:-59px

javascript - 获取 SVG 线、矩形、多边形和圆形标签的长度

我设法在svg中找到路径的长度,但现在我想从SVG中找到直线、矩形、多边形和圆形标签的长度,我现在真的迷路了,还有线索吗?还是已经有一些功能,比如路径? 最佳答案 为了防止其他人想要找到这些标签的长度,我为每个标签制作了一些函数,对它们进行了测试,我说它们工作得很好,这就是我所需要的。vartools={/****Usedtogetthelengthofarect**@paramelistherectelementex$('.rect')*@returnthelengthoftherectinpx*/getRectLength:fu

html - 带有 HTML5 Canvas 的中间有孔的多边形

使用标记我需要能够在多边形中绘制一个洞。现在我有一些非常简单的东西,它使用beginPath()然后为每个点执行lineTo()。然后用fill()填充它。不过,我看不出有什么方法可以让填充的多边形中间没有填充,就像donut一样。我不是在制作donut,但它适合这个例子。有什么我想念的吗?我宁愿不把它画满然后不得不重新画中间。 最佳答案 这是我让它工作的:varctx=canvas.getContext("2d");ctx.beginPath();//polygon1---usuallytheoutsidepolygon,must

html - 没有图像的 CSS3 多边形,如何?

我正在建立一个网站,它是这样的顶部的两个结构是静态的,底部的四个是动态的,当我说动态时,我的意思是可扩展的,像这样因为这些只是颜色、形状和阴影,我相信可以使用CSS3来创建它们。但是我很难这样做。我什至尝试使用CSSHat,但结果很糟糕。这是示例形状这是生成的代码:width:1920px;height:341px;-moz-border-radius:01920px1920px/0181px56px;-webkit-border-radius:01920px1920px/0181px56px;border-radius:01920px1920px/0181px56px;/*borde

javascript - Fabric.js 裁剪 Canvas (或对象组)到多边形

我在Fabric.js中绘制了一个Canvas,我正在向其中添加一组矩形,我想将这些矩形的边缘限制为一组,使其不超出特定区域。想象一下制作一件条纹T恤,条纹是使用一系列矩形制成的,我需要将它们保持在T恤的形状上。我认为最好将整个Canvas夹在T恤的形状上,这样我添加到它的任何东西都会保留在T恤内,但我被卡住了。到目前为止,我只剪裁到基本的圆形和矩形。谢谢 最佳答案 您可以在canvas.clipTo中渲染一个形状:)我刚刚在kitchensink中加载了一个随机的SVG形状并这样做:varshape=canvas.item(0);

css - 多边形 Div——让内容以特定形状溢出?

这是我目前正在处理的网站:http://willcrichton.net/如果你点击中间六边形两侧的箭头,你可以看到它使用jQuery+jQueryCycle+jQueryEasing左右过渡。但是,您也可以看到它相当丑陋——因为我使用的是六边形而不是正方形,并且因为div是正方形,内容六边形以令人不快的方式与背景重叠。所以,我的问题是:我如何从本质上将div改造成六边形?该六边形应与内容div的大小/形状相同,并且当内容位于六边形区域之外时,它应该是不可见的。编辑:HTML$("#content").cycle({fx:'scrollHorz',timeout:0,prev:".le

html - 如何创建多边形 div

我想像这里的图像一样创建HTML元素:问题是DIV元素具有多边形而不是常规矩形,将像弹出窗口一样放置在其他元素之上,并且在该元素内部有必要在源中显示矩形形状的图像但在网络上显示为填充所有空格包含左侧的三Angular形。您是否认为有没有可能在不以适当的多边形格式将显示图像准备为透明PNG的情况下实现这一点?只能通过CSS3转换还是使用canvas或SVG? 最佳答案 一种方法是将图像分成两个容器,大小为父容器的50%,分别变换每个容器并将背景定位为看起来像一个单一的图像。变换可以是倾斜(在答案中使用)或基于透视的旋转。请注意,由于我

html - 如何在CSS多边形内放置一个段落

我已经能够成功地使用shape-outside:polygon(...)和clip-path:polygon(...)来创建所需的多边形形状。我看到许多页面引用了shape-in​​side的使用,但我读到shape-in​​side已被弃用并且没有替代品。它们也是2014年编写的,所以我希望CSS3从那时起有所改变。在网上查看之后,我能够拼凑出一些几乎有效的东西。我喜欢这个形状,但现在我需要文本在形状内换行并overflowhidden。我已经看到关于::before的提示,但我仍然不明白这会有什么帮助。测试它似乎没有产生任何结果。无论简单还是复杂,如何使用CSS将文本包裹在多边形内