www.webdeveloper.com
Results 1 to 2 of 2

Thread: [RESOLVED] fill divided circle, html5 canvas

Hybrid View

  1. #1
    Join Date
    Jun 2010
    Posts
    14

    resolved [RESOLVED] fill divided circle, html5 canvas

    picture

    Hello, newbie here

    Doing in html5 canvas, so JavaScript (was not sure where to post, but here I go...)

    Above is a link to picture that I need to do. It is clock-like.
    I will have to draw a circle, and two lines, from centre to according points on circle.
    That is not a problem, the thing I can not do is
    to fill upper and lower parts of circle that those two lines divide,
    so upper part of a circle should be e.g. red, and lower blue.
    (Plus, it would have to bi gradient, to look more appealing )

    How would you recommend I go about it?
    As newbie, example would be much appreciated.

    Thank you.

  2. #2
    Join Date
    Jun 2010
    Posts
    14
    Ola

    I got it to work!
    I used fill method,
    Code:
    ctx.fillStyle = "green";
        ctx.beginPath();
        ctx.moveTo(center.x, center.y);
        ctx.lineTo(x2, y2);
        ctx.arc(200, 200, radius,  d2r(z1 + 90), d2r(v1 + 90), false);
        ctx.moveTo(center.x, center.y);
        ctx.lineTo(x1, y1);
        ctx.closePath();
        ctx.fill();
    and than repeated the same code, but arc direction in opposite direction:

    Code:
        ctx.fillStyle = "blue";
        ctx.beginPath();
        ctx.moveTo(center.x, center.y);
        ctx.lineTo(x2, y2);
        ctx.arc(200, 200, radius,  d2r(z1 + 90), d2r(v1 + 90), true);
        ctx.moveTo(center.x, center.y);
        ctx.lineTo(x1, y1);
        ctx.closePath();
        ctx.fill();
    Thank you.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles