All geek questions in one place

How to draw only this part of the arc?

Take a look at this image:

enter image description here

I know p1, p2 and the center, which are 2d points. I also know the angle p1-center-p2 and the radius r.

How can I draw only the filled part of the arc using the canvas can () function?

EDIT

What I really need to do, given 2 points and an angle, draw a curved line between these two points, so that the angle p1-center-p2 is the given angle.

What I am doing is calculating the center and radius of the circle in which there are these 2 points, and now I need to draw a line connecting p1 and p2 and having a given angle. This is my function to calculate the center of the environment (which works correctly)

function getCenter(v0x, v0y, v1x, v1y, curve) { // result = p0 resx = parseFloat(v0x); resy = parseFloat(v0y); // tmpvec = (p1 - p0) * .5 tmpx = (v1x - v0x) / 2; tmpy = (v1y - v0y) / 2; // result += tmpvec resx = resx + tmpx; resy = resy + tmpy; // rotate 90 tmpvec tmptmpx = tmpx; tmptmpy = tmpy; tmpy = -tmptmpx; tmpx = tmptmpy; // tmpvec *= 1/tan(c/2) tmpx *= 1/Math.tan(curve/2); tmpy *= 1/Math.tan(curve/2); // return res + tmpvec return [resx+tmpx, resy+tmpy]; }
+6
source share
2 answers

The atan2 (y, x) function is useful for calculating the angle to points in a circle.

 function drawArcPart(cx, cy, radius, p1x, p1y, angle) { var x = p1x - cx; var y = p1y - cy; var startAngle = Math.atan2(y,x); var endAngle = startAngle - angle; var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillStyle='black'; ctx.beginPath(); ctx.arc(cx, cy, radius, startAngle, endAngle, true); ctx.fill(); }

enter image description here

I loaded this javascript into jsFiddle with an extension that also draws dots, and both of your examples.

+2
source

try it

 <html> <head></head> <body onload="drawShape();"> <div> <canvas id="tutorial" width="150" height="200"></canvas> </div> <SCRIPT type="text/javascript"> function drawShape(){ // get the canvas element using the DOM var canvas = document.getElementById('tutorial'); // Make sure we don't execute when canvas isn't supported if (canvas.getContext){ var ctx = canvas.getContext('2d'); ctx.beginPath(); var x = 100; // x coordinate var y = 100; // y coordinate var radius = 100; // Arc radius var startAngle = (Math.PI)-((Math.PI)/4); // Starting point on circle var endAngle = (Math.PI)+((Math.PI)/4); // End point on circle ctx.arc(x,y,radius,startAngle,endAngle, false); ctx.fill(); } else { alert('You need Safari or Firefox 1.5+ to see this demo.'); } } </SCRIPT> </body> </html>

This is a modified example of mozilla HTML5 being disabled

And the result is here

Is this what you want?

+1
source

Source: https://habr.com/ru/post/903342/

More articles:


All Articles