Draw a Circle at Intersecting Lines in Canvas
HTML5 Canvass arcs tutorial
Drawing arcs
You tin can draw arcs on canvas using the arc() method. Before going details on cartoon arcs, here's a cursory overview on radian and angle :
The radian is the standard unit of angular measure, used in many areas of mathematics. An angle'south measurement in radians is numerically equal to the length of a corresponding arc of a unit circle, so one radian is just nether 57.3 degrees (when the arc length is equal to the radius). The radian is represented past the symbol rad An alternative symbol is the superscript letter c. So for instance, a value of i.3 radians could be written as one.iii rad or ane.iiic. See the following diagram :
Use the following formula to convert degrees to radians:
var radians = degrees * Math.PI/180
arc Method: arc(x, y, radius, startAngle, endAngle, direction)
| Parameters | Type | Description |
|---|---|---|
| x | number | The x-coordinate (in pixels), for the center point of the arc in relation to the upper-left corner of the sail rectangle. |
| y | number | The y-coordinate ( in pixels), for the center point of the arc in relation to the upper-left corner of the canvas rectangle. |
| radius | number | The radius or altitude from the point (10,y) that the arc's path follows. |
| startAngle | number | The starting bending, in radians, clockwise, with 0 respective to the three:00 o'clock position on the correct of the circumvolve. |
| endAngle | number | The ending angle, in radians. |
| management | bool | true : The arc is drawn in a counterclockwise management from start to finish. false : The arc is drawn in a clockwise direction from start to end. |
Example : HTML5 Canvas arc using arc() method
The following web document creates a elementary arc.
Output :
Code:
<!DOCTYPE html> <html> <head> <title>Sample arcs instance</championship></caput> <body> <canvas id="demoCanvas" width="340" summit="340"> sheet</canvas> <script> var canvas = document.getElementById('demoCanvas'); var ctx = canvass.getContext('second'); var x = 90; var y = 100; var radius = 75; var startAngle = 1.one * Math.PI; var endAngle = 1.nine * Math.PI; var counterClockwise = false; ctx.beginPath(); ctx.arc(ten, y, radius, startAngle, endAngle, counterClockwise); ctx.lineWidth = 10; // line colour ctx.strokeStyle = 'green'; ctx.stroke(); </script> </body> </html> Example : HTML5 Canvas miscellaneous arcs
The following web document creates various types of arcs.
Output :
Lawmaking :
<!DOCTYPE html> <html> <head> <title>Sample arcs example</title> <script type="text/javascript"> function misc_curves() { var canvas = document.getElementById("Mycanvas"); if (canvas.getContext) { var context = sheet.getContext("2nd"); for (var i = 0; i < 2; i++) // Step through two rows. { // Step through iii versions. for (var j = 0; j < iii; j++) { context.beginPath(); // The x-coordinate. var x = 35 + j * 50; // The y-coordinate. var y = 35 + i * l; // The arc radius. var radius = 20; // The starting signal on the circle. var startAngle = 0; //stop bespeak on the circle. var endAngle = Math.PI + (Math.PI * j) / 2; // The direction of drawing. var anticlockwise = i % 2 === 0 ? imitation : true; // Create the arc path. context.arc(x, y, radius, startAngle, endAngle, anticlockwise); // Show the arcs context.stroke(); } } } } </script> </caput> <body onload="misc_curves();"> <canvas id="Mycanvas" width="340" elevation="340"> canvas</sail> </body> </html> Drawing Circles
An arc is a part of a circle. To draw a circle, describe an arc with a starting angle of 0 and ending angle of 2 x Pi. Here is an instance :
Output :
Code :
<!DOCTYPE html> <html> <head> <championship>Sample arcs case</title></head> <body> <canvas id="demoCanvas" width="340" height="340"> canvas</sheet> <script> var canvas = document.getElementById('demoCanvas'); var ctx = sail.getContext('2nd'); var ten = ninety; var y = 100; var radius = 75; var startAngle = 0; var endAngle = 2 * Math.PI; var counterClockwise = faux; ctx.beginPath(); ctx.arc(ten, y, radius, startAngle, endAngle, counterClockwise); ctx.lineWidth = 10; // line color ctx.strokeStyle = 'blue'; ctx.stroke(); </script> </body> </html> arcTo Method: arcTo(x1, y1, x2, y2, radius)
The arcTo() method creates an arc of radius between 2 tangents. The first tangent is defined by an imaginary line that is fatigued through the last point in a path and the indicate (x1, y1). The 2nd tangent is defined by an imaginary line that is fatigued through the signal (x1, y1) and the point (x2, y2).
Syntax :
arcTo(x1, y1, x2, y2, radius);
| Parameters | Type | Description |
|---|---|---|
| x1 | number | The x-coordinate for the first tangent that intersects with the current path point. |
| y1 | number | The y-coordinate for the outset tangent that intersects with the current bespeak. |
| x2 | number | The x-coordinate for the second tangent that intersects with the x1 and y1 points. |
| y2 | number | The y-coordinate for the 2d tangent that intersects with the x1 and y1 points. |
| radius | number | The radius of the arc to create. |
Example : HTML5 Canvas arcTo() method
The post-obit web certificate creates a rounded corner between a horizontal and a vertical line.
Output :
Code :
<!DOCTYPE html> <html> <caput> <title>Sample arcs instance</title></head> <body> <canvas id="myCanvas" width="300" elevation="600"></canvas> <script> var canvas = document.getElementById("myCanvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); // Draw the imaginary tangents in blue. ctx.beginPath(); ctx.lineWidth = "three"; ctx.strokeStyle = "black"; ctx.moveTo(lxxx, 100); ctx.lineTo(240, 100); ctx.moveTo(200, threescore); ctx.lineTo(200, 220); ctx.stroke(); // Draw it. // Create two lines that have a connecting arc that could exist used as a start to a rounded rectangle. ctx.beginPath(); ctx.strokeStyle = "cherry-red"; ctx.lineWidth = "5"; ctx.moveTo(120, 100); // Create a starting bespeak. ctx.arcTo(200, 100, 200, 220, 75); // Create an arc. ctx.stroke(); } </script> </trunk> </html> HTML5 Canvas : Cartoon Bezier Curves
Bezier curves are used in computer graphics to produce curves which appear reasonably smooth at all scales. Originally adult past Pierre Bézier in the 1970's for CAD/CAM operations. In vector graphics, Bézier curves are used to model polish curves that can be scaled indefinitely. "Paths," as they are commonly referred to in epitome manipulation programs, are combinations of linked Bézier curves. Bézier curves are also used in blitheness equally a tool to control movement
Y'all can draw bezier curves in the same way as you draw lines, just instead of using the lineTo() method, you use either the bezierCurveTo() method or quadraticCurveTo() method. bezierCurveTo() method connects the endpoints with a cubic bezier bend using a specified pair of control points and the quadraticCurveTo() method connects the endpoints with a quadratic bezier curve using a single specified control indicate.
bezierCurveTo() method
A cubic Bézier curve must include 3 points. The first ii points (cp1x,cp1y) and (cp2x, cp2y) are command points that are used in the cubic Bézier adding and the terminal bespeak (ten,y) is the ending betoken for the curve.
Syntax:
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, ten, y)
| Parameters | Type | Description |
|---|---|---|
| cp1x | number | The ten-coordinate of the start Bézier control point. |
| cp1y | number | The y-coordinate of the first Bézier control point. |
| cp2x | number | The x-coordinate of the second Bézier control point. |
| cp2y | number | The y-coordinate of the second Bézier control point. |
| ten | number | The x-coordinate of the bespeak to add to the current path. |
| y | number | The y-coordinate of the point to add together to the current path. |
Note : The first point on the curve is the last bespeak in the existing current subpath. If a path does non exist, use the beginPath and moveTo methods to create a starting point.
Meet the following diagram :
In the above diagram :
- (0, 0) is the pinnacle-left position of the canvas.
- (0, 400) is the lesser-left position of the canvas.
- (0, 500) is the tiptop-correct position of the sail.
- (400, 500) is the bottom-right position of the canvass.
- (0, 300) is the starting point of the curve.
- (150, 0) i.e. (cp1x, cp1y) is the commencement control position of the curve.
- (350, 0) i.e. (cp2x, cp2y) is the second control position of the curve.
- (500, 300) i.eastward. (x, y) is the ending indicate of the curve.
Case : HTML5 Canvas Bezier Bend using bezierCurveTo() method
The following web document draws some straight lines and a Bézier curve (between two points) and creates the character 'R'.
Output :
Code :
<!DOCTYPE html> <html> <caput> <championship>Sample arcs case</title></head> <torso> <canvas id="DemoCanvas" width="500" tiptop="400"></canvass> <script> var sail = document.getElementById("DemoCanvas"); var ctx = sail.getContext("2d"); ctx.lineWidth = seven; ctx.lineCap = "round"; ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.moveTo(30, 200); ctx.lineTo(30, 50); ctx.lineTo(65, l); ctx.moveTo(30, 120); ctx.lineTo(65, 120); ctx.lineTo(100, 200); ctx.strokeStyle = "black"; ctx.stroke(); ctx.beginPath(); ctx.moveTo(65, 50); ctx.bezierCurveTo(120, l, 120, 120, 65, 120); ctx.strokeStyle = "greenish"; ctx.stroke(); </script> </body> </html> quadraticCurveTo() method
A quadratic Bézier curve requires two points. The commencement point is a control betoken that is used in the quadratic Bézier adding and the second point is the ending point for the curve.
Syntax :
quadraticCurveTo(cp1x, cp1y, x, y);
| Parameters | Type | Description |
|---|---|---|
| cp1x | number | The ten-coordinate of the Bézier command point. |
| cp1y | number | The y-coordinate of the Bézier control signal. |
| x | number | The x-coordinate of the signal to add to the electric current path. |
| y | number | The y-coordinate of the betoken to add together to the electric current path. |
Note : The starting betoken for the curve is the last point in the existing current subpath. If a path does non be, utilise beginPath() and moveTo() methods to set a starting signal.
Run into the following diagram :
In the above diagram :
- (0, 0) is the top-left position of the canvas.
- (0, 400) is the bottom-left position of the canvas.
- (0, 500) is the height-correct position of the canvas.
- (400, 500) is the bottom-right position of the canvas.
- (0, 300) is the starting signal of the curve.
- (250, 0) i.east. (cp1x, cp1y) is the command position of the curve.
- (500, 300) i.due east. (x, y) is the catastrophe signal of the curve.
Case : HTML5 Canvas quadratic Bezier Bend using quadraticCurveTo() method
In this example, six shapes together create the following graphics.
Output :
Code :
<!DOCTYPE html> <html> <head> <championship>Sample arcs example</title></head> <body> <canvass id="DemoCanvas" width="500" height="400"></canvas> <script> var canvas = certificate.getElementById('DemoCanvas'); if (canvas.getContext) { var ctx = canvas.getContext('second'); // Draw shapes ctx.beginPath(); ctx.moveTo(75,25); ctx.quadraticCurveTo(25,25,25,62.5); ctx.quadraticCurveTo(25,100,50,100); ctx.quadraticCurveTo(50,120,xxx,125); ctx.quadraticCurveTo(sixty,120,65,100); ctx.quadraticCurveTo(125,100,125,62.v); ctx.quadraticCurveTo(125,25,75,25); ctx.lineWidth = "3"; ctx.strokeStyle = "light-green"; ctx.stroke(); } else { alert('Not supported in this browser.'); } </script> </body> </html> Meet the Pen html css mutual editor by w3resource (@w3resource) on CodePen.
Previous: HTML5 Canvass Line
Next: HTML5 Canvas path tutorial
Source: https://www.w3resource.com/html5-canvas/html5-canvas-arc.php
0 Response to "Draw a Circle at Intersecting Lines in Canvas"
Post a Comment