c visual studio wfp 3d canvas drawing a circle
Drawing shapes with canvas
- « Previous
- Next »
Now that we have gear up upwardly our canvas environment, we can go into the details of how to draw on the canvas. By the finish of this commodity, yous will accept learned how to draw rectangles, triangles, lines, arcs and curves, providing familiarity with some of the bones shapes. Working with paths is essential when drawing objects onto the sail and we volition see how that tin be done.
The grid
Before we tin start cartoon, we demand to talk about the canvas grid or coordinate infinite. Our HTML skeleton from the previous page had a canvas element 150 pixels broad and 150 pixels high.
Ordinarily 1 unit of measurement in the filigree corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the meridian left corner at coordinate (0,0). All elements are placed relative to this origin. So the position of the top left corner of the blue foursquare becomes x pixels from the left and y pixels from the peak, at coordinate (x,y). Afterward in this tutorial we'll see how we can translate the origin to a dissimilar position, rotate the grid and fifty-fifty calibration it, only for at present nosotros'll stick to the default.
Cartoon rectangles
Unlike SVG, <canvas> only supports two archaic shapes: rectangles and paths (lists of points connected by lines). All other shapes must be created by combining one or more than paths. Luckily, nosotros have an array of path drawing functions which make it possible to compose very complex shapes.
First let'southward look at the rectangle. There are three functions that draw rectangles on the canvas:
-
fillRect(x, y, width, height) -
Draws a filled rectangle.
-
strokeRect(ten, y, width, meridian) -
Draws a rectangular outline.
-
clearRect(x, y, width, peak) -
Clears the specified rectangular area, making it fully transparent.
Each of these three functions takes the same parameters. x and y specify the position on the canvass (relative to the origin) of the top-left corner of the rectangle. width and tiptop provide the rectangle's size.
Beneath is the draw() function from the previous page, just at present information technology is making utilize of these three functions.
Rectangular shape example
part describe ( ) { var sheet = document. getElementById ( 'canvass' ) ; if (canvas.getContext) { var ctx = canvass. getContext ( 'second' ) ; ctx. fillRect ( 25 , 25 , 100 , 100 ) ; ctx. clearRect ( 45 , 45 , 60 , lx ) ; ctx. strokeRect ( fifty , 50 , 50 , 50 ) ; } } This example'due south output is shown below.
| Screenshot | Alive sample |
|---|---|
 |
The fillRect() office draws a large blackness square 100 pixels on each side. The clearRect() function then erases a 60x60 pixel square from the eye, and and then strokeRect() is chosen to create a rectangular outline 50x50 pixels inside the cleared square.
In upcoming pages we'll run across ii culling methods for clearRect(), and we'll likewise see how to change the color and stroke mode of the rendered shapes.
Different the path functions nosotros'll see in the next department, all iii rectangle functions draw immediately to the canvas.
Drawing paths
Now let's expect at paths. A path is a list of points, connected by segments of lines that can be of dissimilar shapes, curved or not, of dissimilar width and of different color. A path, or fifty-fifty a subpath, can be closed. To make shapes using paths, nosotros accept some actress steps:
- First, you create the path.
- Then you employ drawing commands to draw into the path.
- Once the path has been created, yous can stroke or fill the path to render it.
Here are the functions used to perform these steps:
-
beginPath() -
Creates a new path. Once created, future cartoon commands are directed into the path and used to build the path up.
- Path methods
-
Methods to set up unlike paths for objects.
-
closePath() -
Adds a straight line to the path, going to the kickoff of the current sub-path.
-
stroke() -
Draws the shape by stroking its outline.
-
fill() -
Draws a solid shape by filling the path's content area.
The commencement stride to create a path is to telephone call the beginPath(). Internally, paths are stored as a listing of sub-paths (lines, arcs, etc) which together form a shape. Every time this method is called, the list is reset and we can starting time drawing new shapes.
Note: When the current path is empty, such as immediately after calling beginPath(), or on a newly created canvas, the first path construction command is ever treated equally a moveTo(), regardless of what it actually is. For that reason, you will almost always want to specifically prepare your starting position subsequently resetting a path.
The second pace is calling the methods that really specify the paths to be drawn. We'll encounter these shortly.
The third, and an optional step, is to phone call closePath(). This method tries to close the shape by drawing a direct line from the current bespeak to the starting time. If the shape has already been closed or there's just one point in the listing, this office does cipher.
Notation: When you phone call fill up(), any open shapes are airtight automatically, so you don't have to call closePath(). This is not the case when you call stroke().
Drawing a triangle
For example, the code for drawing a triangle would look something like this:
function describe ( ) { var sheet = document. getElementById ( 'sail' ) ; if (canvass.getContext) { var ctx = sheet. getContext ( '2d' ) ; ctx. beginPath ( ) ; ctx. moveTo ( 75 , 50 ) ; ctx. lineTo ( 100 , 75 ) ; ctx. lineTo ( 100 , 25 ) ; ctx. fill ( ) ; } } The upshot looks like this:
| Screenshot | Live sample |
|---|---|
 |
Moving the pen
Ane very useful function, which doesn't really draw anything simply becomes function of the path list described higher up, is the moveTo() function. Y'all can probably best think of this as lifting a pen or pencil from i spot on a piece of paper and placing information technology on the next.
-
moveTo(ten, y) -
Moves the pen to the coordinates specified by
xandy.
When the canvas is initialized or beginPath() is chosen, you typically will want to use the moveTo() function to place the starting point somewhere else. Nosotros could also use moveTo() to draw unconnected paths. Have a look at the smiley face below.
To try this for yourself, you lot can use the lawmaking snippet beneath. Just paste it into the depict() function nosotros saw earlier.
part draw ( ) { var sheet = certificate. getElementById ( 'canvass' ) ; if (canvas.getContext) { var ctx = canvass. getContext ( 'second' ) ; ctx. beginPath ( ) ; ctx. arc ( 75 , 75 , 50 , 0 , Math. PI * 2 , true ) ; // Outer circumvolve ctx. moveTo ( 110 , 75 ) ; ctx. arc ( 75 , 75 , 35 , 0 , Math. PI , false ) ; // Mouth (clockwise) ctx. moveTo ( 65 , 65 ) ; ctx. arc ( threescore , 65 , 5 , 0 , Math. PI * 2 , true ) ; // Left center ctx. moveTo ( 95 , 65 ) ; ctx. arc ( 90 , 65 , 5 , 0 , Math. PI * two , true ) ; // Correct eye ctx. stroke ( ) ; } } The result looks like this:
| Screenshot | Alive sample |
|---|---|
 |
If you'd like to see the connecting lines, you lot can remove the lines that phone call moveTo().
Note: To learn more than about the arc() function, see the Arcs section below.
Lines
For drawing straight lines, utilize the lineTo() method.
-
lineTo(x, y) -
Draws a line from the electric current cartoon position to the position specified past
10andy.
This method takes two arguments, ten and y, which are the coordinates of the line'due south end indicate. The starting indicate is dependent on previously drawn paths, where the end point of the previous path is the starting point for the following, etc. The starting point can also be changed by using the moveTo() method.
The example beneath draws two triangles, one filled and one outlined.
function describe ( ) { var sheet = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = sheet. getContext ( '2d' ) ; // Filled triangle ctx. beginPath ( ) ; ctx. moveTo ( 25 , 25 ) ; ctx. lineTo ( 105 , 25 ) ; ctx. lineTo ( 25 , 105 ) ; ctx. fill ( ) ; // Stroked triangle ctx. beginPath ( ) ; ctx. moveTo ( 125 , 125 ) ; ctx. lineTo ( 125 , 45 ) ; ctx. lineTo ( 45 , 125 ) ; ctx. closePath ( ) ; ctx. stroke ( ) ; } } This starts past calling beginPath() to start a new shape path. We then use the moveTo() method to move the starting point to the desired position. Below this, ii lines are drawn which make up two sides of the triangle.
| Screenshot | Live sample |
|---|---|
 |
You'll notice the divergence betwixt the filled and stroked triangle. This is, equally mentioned above, because shapes are automatically closed when a path is filled, simply not when they are stroked. If we left out the closePath() for the stroked triangle, only two lines would have been fatigued, not a complete triangle.
Arcs
To draw arcs or circles, nosotros use the arc() or arcTo() methods.
-
arc(x, y, radius, startAngle, endAngle, counterclockwise) -
Draws an arc which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle going in the given direction indicated by counterclockwise (defaulting to clockwise).
-
arcTo(x1, y1, x2, y2, radius) -
Draws an arc with the given control points and radius, connected to the previous point past a straight line.
Permit's take a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. The startAngle and endAngle parameters define the showtime and finish points of the arc in radians, forth the curve of the circle. These are measured from the x centrality. The counterclockwise parameter is a Boolean value which, when true, draws the arc counterclockwise; otherwise, the arc is drawn clockwise.
Annotation: Angles in the arc function are measured in radians, not degrees. To catechumen degrees to radians you lot can use the following JavaScript expression: radians = (Math.PI/180)*degrees.
The following case is a little more than complex than the ones we've seen higher up. It draws 12 dissimilar arcs all with different angles and fills.
The 2 for loops are for looping through the rows and columns of arcs. For each arc, we start a new path by calling beginPath(). In the code, each of the parameters for the arc is in a variable for clarity, but you wouldn't necessarily practise that in existent life.
The ten and y coordinates should be clear enough. radius and startAngle are fixed. The endAngle starts at 180 degrees (one-half a circle) in the first column and is increased by steps of xc degrees, culminating in a consummate circle in the terminal column.
The statement for the clockwise parameter results in the beginning and 3rd row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs. Finally, the if statement makes the top half stroked arcs and the lesser one-half filled arcs.
Note: This example requires a slightly larger canvass than the others on this page: 150 ten 200 pixels.
function draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2d' ) ; for ( var i = 0 ; i < iv ; i++ ) { for ( var j = 0 ; j < 3 ; j++ ) { ctx. beginPath ( ) ; var x = 25 + j * 50 ; // x coordinate var y = 25 + i * 50 ; // y coordinate var radius = 20 ; // Arc radius var startAngle = 0 ; // Starting signal on circle var endAngle = Math. PI + (Math. PI * j) / two ; // End betoken on circumvolve var counterclockwise = i % two !== 0 ; // clockwise or counterclockwise ctx. arc (x, y, radius, startAngle, endAngle, counterclockwise) ; if (i > ane ) { ctx. fill ( ) ; } else { ctx. stroke ( ) ; } } } } } | Screenshot | Live sample |
|---|---|
 |
Bezier and quadratic curves
The next blazon of paths available are Bézier curves, available in both cubic and quadratic varieties. These are by and large used to draw complex organic shapes.
-
quadraticCurveTo(cp1x, cp1y, ten, y) -
Draws a quadratic Bézier curve from the current pen position to the finish indicate specified by
xandy, using the control point specified bycp1xandcp1y. -
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) -
Draws a cubic Bézier curve from the current pen position to the finish point specified by
xandy, using the control points specified by (cp1x,cp1y) and (cp2x, cp2y).
The difference between these is that a quadratic Bézier curve has a kickoff and an end point (blue dots) and but one control point (indicated by the red dot) while a cubic Bézier bend uses two control points. 
The 10 and y parameters in both of these methods are the coordinates of the cease point. cp1x and cp1y are the coordinates of the first command indicate, and cp2x and cp2y are the coordinates of the 2nd control point.
Using quadratic and cubic Bézier curves tin can be quite challenging, because dissimilar vector drawing software like Adobe Illustrator, we don't take direct visual feedback equally to what we're doing. This makes it pretty hard to draw complex shapes. In the following example, nosotros'll be drawing some unproblematic organic shapes, but if you take the time and, most of all, the patience, much more than complex shapes can be created.
There'due south nothing very difficult in these examples. In both cases we see a succession of curves being drawn which finally consequence in a complete shape.
Quadratic Bezier curves
This instance uses multiple quadratic Bézier curves to render a voice communication balloon.
role describe ( ) { var canvas = certificate. getElementById ( 'canvas' ) ; if (sail.getContext) { var ctx = canvas. getContext ( '2d' ) ; // Quadratic curves example ctx. beginPath ( ) ; ctx. moveTo ( 75 , 25 ) ; ctx. quadraticCurveTo ( 25 , 25 , 25 , 62.five ) ; ctx. quadraticCurveTo ( 25 , 100 , 50 , 100 ) ; ctx. quadraticCurveTo ( 50 , 120 , 30 , 125 ) ; ctx. quadraticCurveTo ( 60 , 120 , 65 , 100 ) ; ctx. quadraticCurveTo ( 125 , 100 , 125 , 62.v ) ; ctx. quadraticCurveTo ( 125 , 25 , 75 , 25 ) ; ctx. stroke ( ) ; } } | Screenshot | Live sample |
|---|---|
 |
Cubic Bezier curves
This example draws a heart using cubic Bézier curves.
office draw ( ) { var canvas = document. getElementById ( 'canvas' ) ; if (canvass.getContext) { var ctx = canvass. getContext ( '2d' ) ; // Cubic curves instance ctx. beginPath ( ) ; ctx. moveTo ( 75 , xl ) ; ctx. bezierCurveTo ( 75 , 37 , lxx , 25 , 50 , 25 ) ; ctx. bezierCurveTo ( 20 , 25 , 20 , 62.v , twenty , 62.v ) ; ctx. bezierCurveTo ( twenty , eighty , 40 , 102 , 75 , 120 ) ; ctx. bezierCurveTo ( 110 , 102 , 130 , 80 , 130 , 62.5 ) ; ctx. bezierCurveTo ( 130 , 62.5 , 130 , 25 , 100 , 25 ) ; ctx. bezierCurveTo ( 85 , 25 , 75 , 37 , 75 , 40 ) ; ctx. fill ( ) ; } } | Screenshot | Alive sample |
|---|---|
 |
Rectangles
In addition to the three methods we saw in Drawing rectangles, which draw rectangular shapes straight to the canvas, at that place's likewise the rect() method, which adds a rectangular path to a currently open path.
-
rect(ten, y, width, height) -
Draws a rectangle whose top-left corner is specified by (
x,y) with the specifiedwidthandheight.
Before this method is executed, the moveTo() method is automatically called with the parameters (x,y). In other words, the current pen position is automatically reset to the default coordinates.
Making combinations
And then far, each example on this page has used only one type of path function per shape. Still, there'due south no limitation to the number or types of paths you tin can use to create a shape. So in this terminal instance, allow's combine all of the path functions to brand a set of very famous game characters.
part describe ( ) { var canvas = certificate. getElementById ( 'canvas' ) ; if (canvas.getContext) { var ctx = canvas. getContext ( '2nd' ) ; roundedRect (ctx, 12 , 12 , 150 , 150 , 15 ) ; roundedRect (ctx, xix , nineteen , 150 , 150 , ix ) ; roundedRect (ctx, 53 , 53 , 49 , 33 , x ) ; roundedRect (ctx, 53 , 119 , 49 , sixteen , 6 ) ; roundedRect (ctx, 135 , 53 , 49 , 33 , 10 ) ; roundedRect (ctx, 135 , 119 , 25 , 49 , ten ) ; ctx. beginPath ( ) ; ctx. arc ( 37 , 37 , xiii , Math. PI / 7 , -Math. PI / 7 , false ) ; ctx. lineTo ( 31 , 37 ) ; ctx. fill ( ) ; for ( var i = 0 ; i < 8 ; i++ ) { ctx. fillRect ( 51 + i * xvi , 35 , four , iv ) ; } for (i = 0 ; i < 6 ; i++ ) { ctx. fillRect ( 115 , 51 + i * 16 , four , iv ) ; } for (i = 0 ; i < 8 ; i++ ) { ctx. fillRect ( 51 + i * sixteen , 99 , 4 , 4 ) ; } ctx. beginPath ( ) ; ctx. moveTo ( 83 , 116 ) ; ctx. lineTo ( 83 , 102 ) ; ctx. bezierCurveTo ( 83 , 94 , 89 , 88 , 97 , 88 ) ; ctx. bezierCurveTo ( 105 , 88 , 111 , 94 , 111 , 102 ) ; ctx. lineTo ( 111 , 116 ) ; ctx. lineTo ( 106.333 , 111.333 ) ; ctx. lineTo ( 101.666 , 116 ) ; ctx. lineTo ( 97 , 111.333 ) ; ctx. lineTo ( 92.333 , 116 ) ; ctx. lineTo ( 87.666 , 111.333 ) ; ctx. lineTo ( 83 , 116 ) ; ctx. make full ( ) ; ctx.fillStyle = 'white' ; ctx. beginPath ( ) ; ctx. moveTo ( 91 , 96 ) ; ctx. bezierCurveTo ( 88 , 96 , 87 , 99 , 87 , 101 ) ; ctx. bezierCurveTo ( 87 , 103 , 88 , 106 , 91 , 106 ) ; ctx. bezierCurveTo ( 94 , 106 , 95 , 103 , 95 , 101 ) ; ctx. bezierCurveTo ( 95 , 99 , 94 , 96 , 91 , 96 ) ; ctx. moveTo ( 103 , 96 ) ; ctx. bezierCurveTo ( 100 , 96 , 99 , 99 , 99 , 101 ) ; ctx. bezierCurveTo ( 99 , 103 , 100 , 106 , 103 , 106 ) ; ctx. bezierCurveTo ( 106 , 106 , 107 , 103 , 107 , 101 ) ; ctx. bezierCurveTo ( 107 , 99 , 106 , 96 , 103 , 96 ) ; ctx. fill ( ) ; ctx.fillStyle = 'black' ; ctx. beginPath ( ) ; ctx. arc ( 101 , 102 , two , 0 , Math. PI * two , true ) ; ctx. make full ( ) ; ctx. beginPath ( ) ; ctx. arc ( 89 , 102 , two , 0 , Math. PI * 2 , truthful ) ; ctx. make full ( ) ; } } // A utility office to draw a rectangle with rounded corners. function roundedRect ( ctx, x, y, width, tiptop, radius ) { ctx. beginPath ( ) ; ctx. moveTo (x, y + radius) ; ctx. arcTo (x, y + height, 10 + radius, y + summit, radius) ; ctx. arcTo (10 + width, y + height, x + width, y + elevation - radius, radius) ; ctx. arcTo (x + width, y, x + width - radius, y, radius) ; ctx. arcTo (x, y, ten, y + radius, radius) ; ctx. stroke ( ) ; } The resulting prototype looks like this:
| Screenshot | Live sample |
|---|---|
 |
We won't become over this in detail, since information technology'due south really surprisingly simple. The most important things to annotation are the employ of the fillStyle belongings on the drawing context, and the use of a utility function (in this case roundedRect()). Using utility functions for $.25 of cartoon you do frequently can be very helpful and reduce the amount of code yous need, as well as its complexity.
Nosotros'll take another wait at fillStyle, in more detail, later in this tutorial. Here, all we're doing is using it to change the fill up color for paths from the default color of black to white, then back again.
Path2D objects
As we have seen in the concluding example, there tin can be a series of paths and drawing commands to draw objects onto your canvas. To simplify the code and to improve performance, the Path2D object, bachelor in contempo versions of browsers, lets yous enshroud or record these drawing commands. You are able to play dorsum your paths quickly. Let's see how we tin can construct a Path2D object:
-
Path2D() -
The
Path2D()constructor returns a newly instantiatedPath2Dobject, optionally with some other path equally an statement (creates a copy), or optionally with a string consisting of SVG path data.
new Path2D ( ) ; // empty path object new Path2D (path) ; // re-create from another Path2D object new Path2D (d) ; // path from SVG path data All path methods similar moveTo, rect, arc or quadraticCurveTo, etc., which nosotros got to know above, are available on Path2D objects.
The Path2D API too adds a way to combine paths using the addPath method. This tin be useful when yous want to build objects from several components, for instance.
-
Path2D.addPath(path [, transform]) -
Adds a path to the current path with an optional transformation matrix.
Path2D example
In this case, nosotros are creating a rectangle and a circle. Both are stored as a Path2D object, so that they are bachelor for later usage. With the new Path2D API, several methods got updated to optionally accept a Path2D object to use instead of the current path. Here, stroke and fill are used with a path argument to draw both objects onto the sheet, for example.
function draw ( ) { var sheet = certificate. getElementById ( 'sail' ) ; if (canvas.getContext) { var ctx = sheet. getContext ( '2d' ) ; var rectangle = new Path2D ( ) ; rectangle. rect ( 10 , x , 50 , 50 ) ; var circle = new Path2D ( ) ; circle. arc ( 100 , 35 , 25 , 0 , 2 * Math. PI ) ; ctx. stroke (rectangle) ; ctx. make full (circle) ; } } | Screenshot | Live sample |
|---|---|
 |
Using SVG paths
Another powerful feature of the new sheet Path2D API is using SVG path information to initialize paths on your sail. This might allow y'all to laissez passer around path data and re-use them in both, SVG and canvas.
The path will move to point (M10 10) and and then movement horizontally lxxx points to the right (h 80), then 80 points down (v fourscore), and so 80 points to the left (h -eighty), and then back to the start (z). You tin run across this instance on the Path2D constructor page.
var p = new Path2D ( 'M10 x h eighty v 80 h -80 Z' ) ; - « Previous
- Side by side »
Source: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes
0 Response to "c visual studio wfp 3d canvas drawing a circle"
Post a Comment