Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Learn More

Canvas drawing combined arc s bug?

  • 3 trả lời
  • 1 gặp vấn đề này
  • 265 lượt xem
  • Trả lời mới nhất được viết bởi 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.

Giải pháp được chọn

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!

Đọc câu trả lời này trong ngữ cảnh 👍 0

Tất cả các câu trả lời (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

Giải pháp được chọn

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.