Vyhľadajte odpoveď

Vyhnite sa podvodom s podporou. Nikdy vás nebudeme žiadať, aby ste zavolali alebo poslali SMS na telefónne číslo alebo zdieľali osobné informácie. Nahláste prosím podozrivú aktivitu použitím voľby “Nahlásiť zneužitie”.

Learn More

Canvas drawing combined arc s bug?

  • 3 odpovede
  • 1 má tento problém
  • 14 zobrazení
  • Posledná odpoveď od patrickmc

more options

Hello,

I'm working on a HTML5 canvas game, where some areas should be drawn connceted in some kind of "blob" of circles.

The code im using to draw looks like this, and an example can be found on github: https://github.com/jrie/Connect

The error is visible when a fleet is navigated outside the main circle, to archive that: Click on fleet icon, click on planet, pressing T to make a turn and see the fleet moves At some point, some strange graphic error, looking like a triangle or extension occurs.

Please try different distances, destionations as possible, its always producing this strange effect.

The code in question producing the result is:

Line 2340 until 2348

gameScreen.beginPath();
       for (area in env.scanAreas) {
           scanArea = env.scanAreas[area];
           scanX = scanArea[1] + env.offsetX;
           scanY = scanArea[2] + env.offsetY;
           gameScreen.arc(scanX, scanY, scanArea[0], 0, 6.28);
       }
       
       gameScreen.closePath();
       gameScreen.fill();

If the beginPath and closePath and fill are all stuffed into the for loop, it draws well, but its a different effect and not one "blob" as requested in this case.

Hello, I'm working on a HTML5 canvas game, where some areas should be drawn connceted in some kind of "blob" of circles. The code im using to draw looks like this, and an example can be found on github: https://github.com/jrie/Connect The error is visible when a fleet is navigated outside the main circle, to archive that: Click on fleet icon, click on planet, pressing T to make a turn and see the fleet moves At some point, some strange graphic error, looking like a triangle or extension occurs. Please try different distances, destionations as possible, its always producing this strange effect. The code in question producing the result is: Line 2340 until 2348 gameScreen.beginPath(); for (area in env.scanAreas) { scanArea = env.scanAreas[area]; scanX = scanArea[1] + env.offsetX; scanY = scanArea[2] + env.offsetY; gameScreen.arc(scanX, scanY, scanArea[0], 0, 6.28); } gameScreen.closePath(); gameScreen.fill(); If the beginPath and closePath and fill are all stuffed into the for loop, it draws well, but its a different effect and not one "blob" as requested in this case.

Vybrané riešenie

Hello Patrick,

thanks for coming back to me. For some reason I did find my problem, it was not really related to the order of the code, but that drawing one circle, then drawing another circle further away, without using a "canvasObject.moveTo" - there is another line draw as the "pencil" moves to the location of the new circle, creating some kind of intersection.

I thought first that this was some kind rendering but, but now it does make some sense - thinking of a turtle drawing engine.

Anyhow, thank you for answering!

Čítať túto odpoveď v kontexte 👍 0

Všetky odpovede (3)

more options

Hello jrie,

Thanks for contacting Mozilla Support. This question is out of the scope of what we're able to assist with. I would suggest posting your question over at Stackoverflow. The community there should be able to assist you with this issue.

Thanks, Patrick

more options

Vybrané riešenie

Hello Patrick,

thanks for coming back to me. For some reason I did find my problem, it was not really related to the order of the code, but that drawing one circle, then drawing another circle further away, without using a "canvasObject.moveTo" - there is another line draw as the "pencil" moves to the location of the new circle, creating some kind of intersection.

I thought first that this was some kind rendering but, but now it does make some sense - thinking of a turtle drawing engine.

Anyhow, thank you for answering!

more options

You are welcome and thanks for updating us. I'll mark your issue as solved.