Jump to content

Creating non-connected circles with graphics.arc()


Recommended Posts

16 hours ago, sambenson said:

Hi all, 
I'm using graphics.arc() to make two circles that aren't joined

Here's a basic example - 

As you can see the circles are joined - how do I avoid this? 

Cheers in advance!

Well if you mean you want them not to be closed arcs, you should remove the 2*PI radian and make it less than 2*PI:

graphics.arc(width/2, height/2, 50, 0, Math.PI);

Will make half of it.


if you want them to offset from each other:


var width = 800,
    height = 230,
    app = new PIXI.Application(width, height, { antialias: true, transparent: true }),
    graphics = new PIXI.Graphics();


var startX = width/4 + (Math.cos(0) * 50);
var startY = height/2 + (Math.sin(0) * 50);

graphics.moveTo(startX, startY);

graphics.lineStyle(7, 0xB3B3B3, 1);
graphics.arc(width/4, height/2, 50, 0, Math.PI*2

var startX = width/1.5 + (Math.cos(0) * 100);
var startY = height/2 + (Math.sin(0) * 100);

graphics.moveTo(startX, startY);

graphics.lineStyle(7, 0xBADA55, 1);
graphics.arc(width/1.5, height/2, 100, 0, Math.PI*2


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...