JS Canvas - 填充豆形多边形
西索
ctx.fill()我的多边形形状之外的JS 画布填充有问题。
这是我的代码的工作原理：
ctx.beginPath()
// Here are for loops that draws a the closed shape using
ctx.stroke();
ctx.fill();
以下是for循环：
var sx1, sy1, ex1, ey1, sx2, sy2, ex2, ey2;
for(var i = 0; i < n; i += Math.floor(n/steps)){
var radius = Math.exp(-2*i/n)*rmax+rmin;
radius += frequencyData[i]/255*(n-i + 200)/n*50;
var angle = -Math.PI/2 - i/n*2*Math.PI;
var x = radius*Math.cos(angle) + w/2+rmin/2;
var y = radius*Math.sin(angle) + (h-110)/2+rmin/2 + analyser_offset;
if (i == 0) {
gctx.moveTo(x,y);
sx1 = x;
sy1 = y;
}else if (i == n-1){
ex1 = x;
ey1 = y;
}else{
gctx.lineTo(x,y);
}
spd += frequencyData[i];
}
for(var i = 0; i < n; i += Math.floor(n/steps)){
var radius = Math.exp(-2*i/n)*rmax+rmin;
radius -= frequencyData[i]/255*(n-i + 200)/n*50;
var angle = -Math.PI/2 - i/n*2*Math.PI;
var x = radius*Math.cos(angle) + w/2+rmin/2;
var y = radius*Math.sin(angle) + (h-110)/2+rmin/2 + analyser_offset;
if (i == 0) {
gctx.moveTo(x,y);
}else if (i == 20){
sx2 = x;
sy2 = y;
}else if (i == n-1){
ex2 = x;
ey2 = y;
} else {
gctx.lineTo(x,y);
}
}
gctx.moveTo(sx1, sy1);
gctx.lineTo(sx2, sy2);
gctx.moveTo(ex1, ey1);
gctx.lineTo(ex2, ey2);
所以第一个 for 循环绘制形状的外侧，第二个 for 循环绘制内侧。然后sx1, sy1, ex1, ey1, sx2, sy2, ex2, ey2变量在这里以确保在最后 4 行中，它关闭形状（通过在外线和内线之间添加垂直线）。也许这个问题是因为我以不寻常的顺序绘制线条？（就像通过从 2 条水平线开始然后添加 2 条垂直线来绘制矩形一样）这是我在 之后得到的fill()：
这就是我想要的：
那么你能指导我如何实现这一目标吗？
西索
好的，我通过使第二个循环以相反的顺序进行来修复它：for (var i = n-1; i >= 0; i -= Math.floor(n/steps))所以它以更常见的顺序绘制多边形并且有效！我什至不需要使用我想要的最后 4 行来关闭它，这太棒了！
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
面料js多边形setCoords
- 2
在JS中绘制多个多边形
- 3
面料js多边形setCoords
- 4
gmaps.js - 绘制多边形
- 5
如何动态生成在Canvas中向上移动的多边形？
- 6
从d3.js中的GeoJson多边形获取每个多边形的质心
- 7
Three.js模型平滑多边形
- 8
D3js在多边形内单击
- 9
GeoJSON多边形的Leaflet Js计算区域
- 10
多边形内的Leaflet和Turf.js点
- 11
从路径反应js删除点更新多边形
- 12
创建可点击的多边形three.js
- 13
使用Three.js生成常规多边形
- 14
Three.js-获得低多边形外观
- 15
使用点击功能绘制新的Kinetic JS多边形
- 16
D3js在多边形内单击
- 17
在ArcGIS JS中使用要素/多边形的子查询
- 18
如何缩放/移动相机以在Cesium.js中显示多边形（使视口适应多边形边界）
- 19
FLTK填充多边形
- 20
算法创建正方形内n个角的多边形（HTML5-Canvas）？
- 21
为<canvas>映射多边形的正确方法（以及实现此目的的工具）
- 22
使用html2canvas时，Google地图上的多边形会污染画布
- 23
使用 html2canvas 时，画布上未显示传单地图多边形
- 24
无法在leaflet.js上以d3.js“格式”绘制多边形
- 25
一个可重用的功能，可以使用html5 canvas将图像裁剪为多边形
- 26
Pixi JS-'Sprite from Texture'不采用热门区域多边形
- 27
在D3 JS中为给定的数据点附加随机选择的多边形
- 28
如何在paper.js中扩展Shape类以创建新的多边形
- 29
将Google Maps JS API ImageMapType裁剪为多边形
我来说两句