Javascript HTML5 Canvas ctx.fill()在笔划区域外填充

Javascript HTML5 Canvas ctx.fill()在笔划区域外填充,javascript,html,canvas,html5-canvas,Javascript,Html,Canvas,Html5 Canvas,我在虚拟天空图书馆工作。图书馆试图展示天空的视觉表现。该库构建在html画布上。在原始代码中,银河系是用ctx.stroke()。我尝试添加ctx.fill()来填充银河系区域,但对于某些坐标/日期,画布填充在笔划区域之外。我添加了两个代表问题的图像。在填充版本中,请注意,它还填充了银河系之外的其他区域。我在这个问题上花了很多时间,但不明白为什么画布会在绘制区域之外填充 不带ctx.fill() 使用ctx.fill() 下面是绘制银河线的代码: 正如已经说过的,这可能来自您的数据。 一

我在虚拟天空图书馆工作。图书馆试图展示天空的视觉表现。该库构建在html画布上。在原始代码中,银河系是用
ctx.stroke()。我尝试添加
ctx.fill()
来填充银河系区域,但对于某些坐标/日期,画布填充在笔划区域之外。我添加了两个代表问题的图像。在填充版本中,请注意,它还填充了银河系之外的其他区域。我在这个问题上花了很多时间,但不明白为什么画布会在绘制区域之外填充

不带ctx.fill()


使用ctx.fill()


下面是绘制银河线的代码:
正如已经说过的,这可能来自您的数据。 一种容易检查其完整性的方法是在每个点位置绘制一个小矩形


这样可以避免检查每个数字。

编写了一个小脚本来查找坐标中的任何跳跃。输出:

Diff found at 342 with newX:   4.3035 and newY: 46.2481 and oldX:359.592 and oldY: 46.1929
Diff found at 624 with newX: 355.2714 and newY: 64.426  and oldX: 0.2476 and oldY: 66.2511
因此,您需要将360添加到342和624之间的所有x值。 您可以在此处看到它的演示:

不幸的是,我不知道这是否真的解决了你的问题,因为我不知道你的绘图代码。您应该更新它,以便将来能够使用循环坐标

如果您是懒惰的,并且添加它是有效的,那么下面是修复的第一行(带有js舍入错误):

const json='{“galaxy”:[[“gold”, 254.1778, -21.5124, 253.6146, -22.5310, 253.2638, -27.7008, 251.9368, -29.7742, 249.7919, -29.7867, 247.8000, -28.4406, 246.5570, -26.9571, 244.6278, -25.8787, 242.5067, -26.0070, 241.5945, -25.3687, 240.7208, -23.0525, 239.5973, -22.3533, 238.6863, -23.5322, 238.7180, -25.7313, 239.4131, -28.0723, 238.6475, -30.8747, 239.9512, -34.4963, 240.4545, -37.0030, 238.8220, -39.1709, 235.6101, -41.6744, 234.5926, -42.9833, 235.6221, -44.6917, 235.5743, -46.4283, 232.6913, -48.4186, 228.3087, -49.7552, 225.9823, -50.6267, 221.4249, -52.5289, 216.0338, -54.6596, 209.0229, -55.3209, 202.9102, -56.0362, 196.2626, -56.3616, 191.7337, -57.1169, 184.7426, -59.1857, 180.5514, -58.8402, 175.1997, -58.5802, 170.6339, -57.6749, 168.3549, -56.2380, 163.3607, -54.7001, 159.2106, -51.3301, 154.8495, -47.2975, 150.0574, -45.2411, 146.8211, -44.7221, 145.5418, -45.4794, 145.6709, -46.1571, 149.5391, -48.3145, 150.7915, -49.6707, 150.0747, -51.0247, 147.4159, -49.8497, 144.3472, -47.8592, 142.7713, -47.5886, 142.7304, -48.1825, 141.8590, -48.7921, 143.8702, -51.7563, 146.7533, -53.8733, 146.7337, -54.7900, 145.4937, -55.0315, 136.3994, -53.7185, 133.1890, -53.9932, 132.3952, -55.2722, 133.9782, -56.3603, 137.5581, -56.8447, 142.3823, -56.7640, 147.1253, -56.7384, 149.2668, -57.3424, 151.0831, -57.4354, 153.9265, -58.4216, 157.9421, -58.9774, 159.0422, -59.6771, 157.5067, -60.3507, 155.1830, -59.7783, 151.9601, -59.2083, 149.2887, -59.3163, 148.3379, -59.9243, 149.9157, -61.4340, 154.0475, -62.1249, 155.9994, -62.2575, 159.2582, -63.5263, 165.5091, -63.4204, 167.1619, -62.8290, 170.1596, -61.3662, 172.9661, -61.4156, 176.0518, -62.9133, 179.3437, -64.2607, 181.9387, -65.3282, 184.3779, -69.3924, 188.2568, -70.9570, 194.7347, -71.2607, 199.7570, -70.2394, 204.1730, -68.8427, 209.0938, -67.8511, 216.7510, -68.0095, 221.9748, -67.1396, 227.5494, -66.2461, 234.5158, -64.3854, 240.5233, -61.8468, 244.0983, -60.4173, 251.3801, -59.1124, 253.2926, -57.4685, 254.7774, -56.3244, 261.4819, -54.4899, 265.8676, -50.8482, 268.8085, -48.0793, 269.9543, -46.3469, 270.5405, -43.6313, 270.6492, -42.3809, 271.0668, -41.1083, 273.1271, -38.6387, 274.8287, -36.5477, 276.5511, -33.8477, 275.4040, -33.1596, 275.2727, -30.5290, 276.8968, -28.1703, 277.9533, -25.4297, 278.6386, -22.3113, 279.4081, -19.7351, 280.9230, -17.4472, 281.9964, -15.6719, 282.8788, -13.6664, 283.3409, -11.0282, 284.5659, -8.4787, 285.8740, -5.6156, 287.7313, -3.1057, 289.7038, -1.0941, 290.4044, -0.0164, 290.7342, 1.1813, 291.9363, 0.4122, 292.8626, 0.7917, 295.5690, 0.8033, 297.0695, 1.1497, 297.0874, 2.1407, 295.9694, 2.3815, 294.6764, 2.5679, 294.4415, 3.7745, 295.0541, 5.1814, 296.9021, 5.9879, 297.7330, 6.5454, 297.6053, 8.4351, 298.6240, 10.2040, 298.1628, 13.5562, 299.1257, 15.5289, 302.8713, 15.4981, 305.5156, 16.1286, 308.1366, 16.6469, 308.7496, 18.5262, 307.5513, 19.8431, 307.7080, 20.7394, 309.0176, 21.5802, 308.7945, 23.5149, 309.4605, 24.2478, 310.5891, 24.9863, 310.3480, 26.0982, 308.9284, 26.8788, 309.1600, 27.5971, 311.8741, 29.1431, 313.3279, 32.0552, 313.9435, 35.1102, 314.9513, 36.1769, 319.2157, 38.0107, 320.5720, 39.7440, 321.0403, 40.9232, 321.8310, 41.6873, 323.6238, 44.8754, 325.1386, 46.0919, 328.0798, 46.8738, 332.6317, 47.1238, 338.1292, 47.4766, 344.7038, 47.6502, 346.4796, 47.7702, 351.3753, 46.7280, 355.1420, 46.2097, 359.5920, 46.1929, 4.3035, 46.2481, 8.0516, 45.6862, 10.5201, 45.7218, 12.3781, 45.1055, 16.3043, 45.2972, 19.0389, 44.8213, 23.6309, 45.0223, 30.7979, 43.0638, 32.8210, 42.8635, 40.6571, 43.7653, 43.6189, 43.8484, 46.6891, 42.5931, 45.3773, 41.6641, 41.7099, 41.8080, 39.3969, 41.6311, 36.5579, 40.8644, 36.3328, 39.9578, 39.0080, 38.9254, 43.4828, 39.0665, 47.0254, 39.2746, 50.5370, 39.3676, 53.6788, 39.5428, 55.7670, 38.8688, 57.1481, 37.3216, 57.2361, 35.7482, 56.6404, 33.7143, 57.1765, 32.1478, 58.8043, 30.8405, 59.9439, 30.9968, 61.4966, 33.3066, 61.4994, 36.0547, 61.1808, 38.6650, 61.7684, 40.0026, 63.8402, 40.1004, 71.4989, 34.6769, 75.3343, 31.9184, 79.7168, 29.0407, 81.0519, 25.1195, 82.1320, 22.0941, 83.6308, 17.4698, 85.5679, 15.1690, 86.9568, 12.6324, 87.7444, 8.8192, 91.3008, 6.1831, 92.8266, 2.6539, 94.6923, -2.1965, 97.7264, -6.0265, 102.5525, -9.6439, 104.6125, -11.6416, 105.1552, -14.2536, 108.2256, -18.5894, 109.6456, -25.3483, 111.2200, -27.2135, 111.2669, -32.1720, 114.7741, -37.8718, 116.9787, -42.4014, 117.0836, -45.1959, 116.1853, -48.6868, 118.8947, -50.1703, 123.5005, -49.94
Diff found at 342 with newX:   4.3035 and newY: 46.2481 and oldX:359.592 and oldY: 46.1929
Diff found at 624 with newX: 355.2714 and newY: 64.426  and oldX: 0.2476 and oldY: 66.2511
["#396bad",254.1778,-21.5124,253.6146,-22.531,253.2638,-27.7008,251.9368,-29.7742,249.7919,-29.7867,247.8,-28.4406,246.557,-26.9571,244.6278,-25.8787,242.5067,-26.007,241.5945,-25.3687,240.7208,-23.0525,239.5973,-22.3533,238.6863,-23.5322,238.718,-25.7313,239.4131,-28.0723,238.6475,-30.8747,239.9512,-34.4963,240.4545,-37.003,238.822,-39.1709,235.6101,-41.6744,234.5926,-42.9833,235.6221,-44.6917,235.5743,-46.4283,232.6913,-48.4186,228.3087,-49.7552,225.9823,-50.6267,221.4249,-52.5289,216.0338,-54.6596,209.0229,-55.3209,202.9102,-56.0362,196.2626,-56.3616,191.7337,-57.1169,184.7426,-59.1857,180.5514,-58.8402,175.1997,-58.5802,170.6339,-57.6749,168.3549,-56.238,163.3607,-54.7001,159.2106,-51.3301,154.8495,-47.2975,150.0574,-45.2411,146.8211,-44.7221,145.5418,-45.4794,145.6709,-46.1571,149.5391,-48.3145,150.7915,-49.6707,150.0747,-51.0247,147.4159,-49.8497,144.3472,-47.8592,142.7713,-47.5886,142.7304,-48.1825,141.859,-48.7921,143.8702,-51.7563,146.7533,-53.8733,146.7337,-54.79,145.4937,-55.0315,136.3994,-53.7185,133.189,-53.9932,132.3952,-55.2722,133.9782,-56.3603,137.5581,-56.8447,142.3823,-56.764,147.1253,-56.7384,149.2668,-57.3424,151.0831,-57.4354,153.9265,-58.4216,157.9421,-58.9774,159.0422,-59.6771,157.5067,-60.3507,155.183,-59.7783,151.9601,-59.2083,149.2887,-59.3163,148.3379,-59.9243,149.9157,-61.434,154.0475,-62.1249,155.9994,-62.2575,159.2582,-63.5263,165.5091,-63.4204,167.1619,-62.829,170.1596,-61.3662,172.9661,-61.4156,176.0518,-62.9133,179.3437,-64.2607,181.9387,-65.3282,184.3779,-69.3924,188.2568,-70.957,194.7347,-71.2607,199.757,-70.2394,204.173,-68.8427,209.0938,-67.8511,216.751,-68.0095,221.9748,-67.1396,227.5494,-66.2461,234.5158,-64.3854,240.5233,-61.8468,244.0983,-60.4173,251.3801,-59.1124,253.2926,-57.4685,254.7774,-56.3244,261.4819,-54.4899,265.8676,-50.8482,268.8085,-48.0793,269.9543,-46.3469,270.5405,-43.6313,270.6492,-42.3809,271.0668,-41.1083,273.1271,-38.6387,274.8287,-36.5477,276.5511,-33.8477,275.404,-33.1596,275.2727,-30.529,276.8968,-28.1703,277.9533,-25.4297,278.6386,-22.3113,279.4081,-19.7351,280.923,-17.4472,281.9964,-15.6719,282.8788,-13.6664,283.3409,-11.0282,284.5659,-8.4787,285.874,-5.6156,287.7313,-3.1057,289.7038,-1.0941,290.4044,-0.0164,290.7342,1.1813,291.9363,0.4122,292.8626,0.7917,295.569,0.8033,297.0695,1.1497,297.0874,2.1407,295.9694,2.3815,294.6764,2.5679,294.4415,3.7745,295.0541,5.1814,296.9021,5.9879,297.733,6.5454,297.6053,8.4351,298.624,10.204,298.1628,13.5562,299.1257,15.5289,302.8713,15.4981,305.5156,16.1286,308.1366,16.6469,308.7496,18.5262,307.5513,19.8431,307.708,20.7394,309.0176,21.5802,308.7945,23.5149,309.4605,24.2478,310.5891,24.9863,310.348,26.0982,308.9284,26.8788,309.16,27.5971,311.8741,29.1431,313.3279,32.0552,313.9435,35.1102,314.9513,36.1769,319.2157,38.0107,320.572,39.744,321.0403,40.9232,321.831,41.6873,323.6238,44.8754,325.1386,46.0919,328.0798,46.8738,332.6317,47.1238,338.1292,47.4766,344.7038,47.6502,346.4796,47.7702,351.3753,46.728,355.142,46.2097,359.592,46.1929,364.3035,46.2481,368.0516,45.6862,370.5201,45.7218,372.3781,45.1055,376.3043,45.2972,379.0389,44.8213,383.6309,45.0223,390.7979,43.0638,392.821,42.8635,400.6571,43.7653,403.6189,43.8484,406.6891,42.5931,405.3773,41.6641,401.7099,41.808,399.3969,41.6311,396.5579,40.8644,396.3328,39.9578,399.008,38.9254,403.4828,39.0665,407.0254,39.2746,410.537,39.3676,413.6788,39.5428,415.767,38.8688,417.1481,37.3216,417.2361,35.7482,416.6404,33.7143,417.1765,32.1478,418.8043,30.8405,419.9439,30.9968,421.4966,33.3066,421.4994,36.0547,421.1808,38.665,421.7684,40.0026,423.8402,40.1004,431.4989,34.6769,435.3343,31.9184,439.71680000000003,29.0407,441.0519,25.1195,442.132,22.0941,443.6308,17.4698,445.5679,15.169,446.9568,12.6324,447.7444,8.8192,451.3008,6.1831,452.8266,2.6539,454.6923,-2.1965,457.7264,-6.0265,462.5525,-9.6439,464.6125,-11.6416,465.1552,-14.2536,468.2256,-18.5894,469.6456,-25.3483,471.22,-27.2135,471.2669,-32.172,474.7741,-37.8718,476.9787,-42.4014,477.0836,-45.1959,476.1853,-48.6868,478.8947,-50.1703,483.5005,-49.9484,485.9819,-48.8761,482.1675,-44.3179,482.4135,-42.9137,484.65909999999997,-42.8292,489.18489999999997,-46.1315,492.502,-47.4562,494.39549999999997,-47.475,495.7144,-46.3461,491.5066,-42.891,492.01070000000004,-42.0135,497.8183,-45.2697,499.31309999999996,-45.0639,499.6524,-44.1094,496.90340000000003,-40.6399,496.6626,-38.9913,499.6753,-40.1504,504.81510000000003,-42.6899,510.5786,-42.3526,513.6315999999999,-43.0367,515.7573,-42.5342,516.1233,-41.0904,512.569,-38.5605,508.4971,-37.7767,501.2865,-38.2886,495.1421,-35.96,489.8501,-32.1764,486.23199999999997,-28.4253,482.1594,-21.3427,478.5304,-12.7577,476.3335,-8.7013,472.8556,-6.4334,469.1321,-2.3025,468.1548,0.0096,467.9889,5.4587,466.7266,8.9737,463.4908,11.8896,461.3959,15.0964,459.5314,17.7842,457.6915,19.7759,456.9057,21.2016,450.6296,24.951,448.07439999999997,27.4918,446.0675,31.0217,445.2336,32.7789,441.64459999999997,36.8533,439.8386,39.1558,438.6539,44.2051,437.5234,45.5296,433.084,46.1406,429.0884,46.5652,426.47839999999997,48.5322,425.01869999999997,50.6773,423.1096,51.4737,420.4311,51.8441,420.2604,52.7052,423.6488,52.7609,425.6099,53.0495,428.01779999999997,52.7517,428.0826,53.7533,423.1671,54.9872,417.4967,55.4868,418.4393,56.1385,420.5618,56.2369,422.6651,56.7553,422.6924,57.7129,419.3107,59.2013,410.7444,59.4785,405.7503,59.6435,403.3097,60.6511,398.7256,61.5348,395.7107,62.5099,390.2614,62.7058,387.5803,63.4145,383.1877,65.0421,378.5579,65.6747,373.7778,67.5849,371.215,68.161,367.5359,67.6326,365.1034,66.7569,362.215,66.1991,360.2476,66.2511,355.2714,64.426,350.1006,62.9385,344.4302,62.4847,339.3002,60.4931,333.4702,58.8851,331.1327,59.4605,330.9382,61.9623,340.6152,65.1092,343.2879,66.7647,343.3581,70.1643,341.1773,70.879,336.6449,73.1299,333.5813,75.1391,324.6186,76.5981,322.6315,75.9427,319.0891,73.7015,314.885,71.0639,315.6348,68.7048,315.4588,66.8973,313.0831,64.8622,312.0635,62.588,314.0142,60.2312,313.6305,59.4861,311.8591,59.3915,309.8048,58.5233,310.2041,57.1819,306.9144,55.9804,304.6804,54.7702,305.2319,53.7273,307.7332,52.9357,308.4628,52.2243,308.0011,51.7205,306.5029,51.7495,304.1552,50.3598,302.5798,48.5193,302.1408,47.1988,300.7148,46.6004,299.0278,47.0595,297.2437,46.8711,295.7553,46.0584,294.7485,44.4314,292.7755,41.4764,288.6933,39.1997,287.4471,37.851,287.5118,36.7221,289.2538,36.0606,290.9985,36.0011,292.6594,35.2362,292.395,34.126,291.207,33.2023,288.424,33.016,287.009,32.3231,286.5059,31.2666,287.0896,29.6223,286.582,27.3683,285.1771,25.5062,283.101,23.9449,281.0469,22.801,279.4373,21.4068,279.1821,19.6473,279.7551,18.2109,280.9496,17.7421,282.622,17.1833,283.2966,16.1546,283.0965,15.0372,281.5283,14.0053,280.0909,12.9151,278.6961,11.5975,277.0707,10.5385,275.4225,9.5688,273.4622,8.5487,270.9916,7.3738,269.3157,5.7621,268.8705,4.4507,269.5389,3.1987,271.0927,2.6855,273.2811,2.5608,275.4739,3.3006,278.1912,5.078,281.909,8.5271,284.1697,11.3576,286.2251,14.0132,286.3233,15.1915,286.1158,15.51,285.7599,16.6912,286.7631,18.2914,287.1951,19.3787,286.9849,20.8446,289.3257,22.5391,291.9464,25.4127,292.4286,28.5332,293.4593,30.5996,297.223,32.4772,299.7133,35.0595,303.4745,35.0807,304.1266,34.0245,303.6819,30.327,300.8895,28.8322,296.8912,28.3993,294.9144,27.6937,294.5657,26.614,296.1041,25.9037,297.3739,25.6845,297.8246,24.471,295.94,22.7956,293.0649,21.4866,291.1229,20.8588,290.324,19.7277,290.6364,18.7692,292.0849,18.3219,293.1902,17.8198,293.1968,16.4933,292.2117,15.0311,290.2679,13.8513,288.7569,12.59,288.6076,10.9218,288.7328,9.7665,287.2839,8.8429,285.582,8.1189,284.291,7.0396,283.2366,5.8411,282.9327,3.8283,282.5522,3.2275,280.8435,2.7268,279.3674,2.2532,278.3224,1.3453,278.2314,0.7429,279.1609,1.5654,279.5029,0.9574,279.897,-0.2562,281.6814,-0.8823,283.4665,-1.5073,284.0658,-2.4642,282.9599,-3.4894,281.1068,-3.6991,279.049,-4.0172,278.1079,-5.1256,278.2582,-6.799,279.0976,-9.4057,278.6578,-11.646,277.317,-14.1578,276.16,-16.6976,275.896,-19.1108,275.5302,-21.837,274.9452,-24.2398,272.9984,-26.4299,270.0613,-28.0668,268.2229,-29.8114,268.5228,-30.2623,267.9381,-32.132,267.1568,-33.2373,265.0719,-33.605,262.2933,-32.3327,261.2061,-30.0066,261.2532,-27.8653,261.7517,-26.3868,262.0161,-24.8538,263.5809,-22.8788,265.0658,-21.1691,265.8074,-19.415,266.6842,-18.7916,268.0278,-18.7995,268.7521,-17.491,268.3084,-15.3906,266.9707,-13.3787,264.9872,-12.4603,262.4372,-12.2113,260.5499,-13.2122,258.4769,-14.8956,256.1174,-16.7507,254.465,-18.3043,253.6343,-20.3552,254.1778,-21.5124,254.1778,-21.5124,254.1778,-21.5124]