I'm trying to make a sort of pie-chart shape on a canvas element, however I can't seem to find any function that does this by itself. I only seem to be able to draw full circles and segments. Is there an easy way to do this?
(See also: Wikipedia on circle terminology)
The following should work:
context.moveTo(cx,cy);
context.arc(cx,cy,radius,startangle,endangle);
context.lineTo(cx,cy);
context.stroke(); // or context.fill()
with cx, cy being the center of the arc.
Related
I want to implement rotating rectangle around cicrle in such way, that circle has no rotation, and rectangle has. All object's are Box2D Body objects. Here is picture, what I want to have:
In my case rectangle touches circle, but I think it doesn't matter.
At first I tried to do it with two Fictures for same Body, but there was a problem with rotation: I couldn't have one ficture with rotation and another without.
I think, it should be somehow connected with joints, but I don't know what exactly Joint I should use. Maybe are there another solutions?
I think DistanceJointDef will do the tricks
you could put the radius if the circle as the distance with a little margin if you want
you also have to reduce the friction of bodies so the rectangle can move smoothly
DistanceJointDef djd = new DistanceJointDef();
djd.bodyA = bodyRactangle;
djd.bodyB = bodyCirlce;
djd.length = radius + margin;
world.createJoint(djd);
bodyRactangle is a dynamic body
bodyCirlce is a static body
try that for a start, hope it is helpful
Good luck !!
I'm trying to draw a path using HTML Canvas. It consists of several Bezier curves linked together. For some reason, I cannot draw the whole path and then stroke. Instead, I need to stroke for each Bezier curve. I'm using a light purple color as the stroke color, but at the intersection of the curves, I seem to get something like white instead of the light purple I expect. Like this (sorry I can't post an image since I'm new on Stack Overflow):
I'm using stroke style with opacity 1, so I believe it's not a transparency issue. So what might be causing this problem?
FYI, I'm drawing each Bezier curve with code like this, where a is the drawing context of the canvas, and this.bloom.c is something like "rgba(xxx,xxx,xxx,1)":
a.strokeStyle = this.bloom.c;
a.beginPath();
a.moveTo(e.x, e.y);
a.bezierCurveTo(c.x, c.y, b.x, b.y, d.x, d.y);
a.stroke();
Thanks very much!
Use the appropriate "blend modes" natively supported by HTML5 Canvas context for Composite Operations. In your case you may use 'source-over'
For example:
var context = document.getElementById('myCanvas').getContext('2d');
context.globalCompositeOperation = 'source-over';
See Compositing and Blending 1.0
source-atop
source-in
source-out
source-over
destination-atop
destination-in
destination-out
destination-over
lighter
xor
copy
Currently, when using the HTML5 canvas element, stroked paths have slightly feathered edges.
Here is some example code I am using:
this.context.lineJoin = "round";
this.context.lineTo(x1, y1);
this.context.lineTo(x2, y2);
this.context.closePath();
this.context.stroke();
I was wondering if there was a way to create lines without slightly feathered edges.
When drawing lines, canvas automatically antialiases them, which is what you describe as feathered edges.
To avoid antialiasing, you will need to draw the lines manually using putImageData directly. (see MDN for canvas pixel manipulation)
A suitable algorithm for this is Bresenham's line algorithm which is quite easy to implement for JS/canvas.
Canvas uses subpixel accuracy.
Add 0.5 to your coorxinates. 0.0 is the border between pixels and thus line falls on two image data pixels.
I am trying to make a donut chart using the arc function in the HTML5 canvas. I am wanting to know how to use the lineTo function to connect two arcs together.
At the moment I have a pie chart which has fixed central x/y coords, so making the slices is easy as once the arc of each slice is done, the lineTo method simply uses the the fixed coords.
However with a ring/donut chart, I have two arcs, one with a smaller radius, but no idea how to connect the ends together without horrifically complicated trigonometry. Is there any way to get the 'start' and 'end' x/y coords of the arc?
I have a current hackyish 'solution' of simply drawing a smaller white circle over the pie chart to give the ring graph, but I want to know the answer to the question above.
You just have to remember a little trigonometry. If your center point is x, y and radius is r; then the coordinates on the circle at an angle alpha are:
pointX = x + Math.cos(alpha) * r;
pointY = y + Math.sin(alpha) * r;
And you have two of those angles, corresponding to the starting and the ending point.
Why are you drawing arcs? Would'nt it be easier if you just draw the circle (or circles for the ring) and then draw radius?
Okay so basically I want to draw a circle in as3 that has a 'hole' in it (like a donut). Something like this, but without the outlines:
http://www.steel.ie/DugganSteel/Pictures/Hollow-circle.gif
This doesn't work:
SPRITE.graphics.beginFill(0xFFFFFF);
SPRITE.graphics.drawCircle(0,0,10);
SPRITE.graphics.endFill();
SPRITE.graphics.drawCircle(0,0,5);
I mean this seems like it'd be simple but I can't find any information on it. I should also mention that I'm trying to only draw 3/4 of the circle, like 3/4 of donut. So I was planning on drawing a transparent circle and square over the original circle, I know this seems kinda of weird since you'd expect something transparent to show whats underneath it.
Its actually really simple. See the following code:
var p:Point = new Point(100, 100);
graphics.beginFill(0xFF0000);
graphics.drawCircle(p.x, p.y, 100);
graphics.drawCircle(p.x, p.y, 50);
Intersections cancel each other out until you call endFill
Goodluck!
You can just make the line thickness the desired donut width and avoid using beginFill
set graphics.lineStyle
To make it only go 3/4 of the way around you could use curveTo to draw the 3 quarters.
The above method by Tyler works, however if an easier way to do it is to simply begin drawing the inner circle first. Basically Flash doesn't actually fill in the color until you call endFill() (again as mentioned by Tyler), so you start drawing on the inner circle, then the outer circle then on endFill() Flash fills in the gap.
SPRITE.graphics.beginFill(0xFFFFFF);
SPRITE.graphics.drawCircle(0,0,5);
SPRITE.graphics.drawCircle(0,0,10);
SPRITE.graphics.endFill();
Hope this clears things up for you.
Introduction to Flash drawing API, will help you understand a bit more :
http://www.senocular.com/flash/tutorials/flash10drawingapi/