WIN10 Series: JavaScript graphics

Adding a canvas element to a page produces a rectangular bitmap canvas on the page, and you can use JavaScript to draw a graphic image in real time on the canvas. When drawing a drawing, you need to call the canvas's getcontext function to get the object associated with the canvas for drawing graphics (such as 2D graphics, 3D graphics), and then use this object to invoke different graphical functions to draw the corresponding graphic. The following describes how to draw several common graphics in 2D graphics.

(1) Straight line

When drawing a line, use the moveTo(x, y) function to set the starting point of the line, and the parameters x and y represent the horizontal and vertical coordinates of the starting point, in pixels, and then through the LineTo (x, y) function to set the end point of the line, and the parameters x and y represent the horizontal and vertical coordinates of the end point Also in pixels, the stroke function is finally called to draw a line. The following is a sample code to draw a line:

// get the appropriate canvas

var canvasobject = document.getElementById ("Canvasid");

// get used to draw 2D objects of the graph

var contextobject = Canvasobject.getcontext ("2d");

Contextobject.strokestyle = "RGB (0, 162, 232)";// Set Line Color

Contextobject.moveto (+);// set the starting point for a line

Contextobject.lineto (a); Set End point

Contextobject.stroke ();// Draw a line

The above code first calls the getElementById function of the Document object with "Canvasid" as the parameter to find the canvas object with the id attribute value canvasid from the corresponding page and assigns the value to the Canvasobject variable. The GetContext function of the canvas object is called by the variable Canvasobject to get the object associated with the canvas for drawing 2D graphics, and assigns a value to the ContextObject variable The Strokestyle property is then called through the ContextObject variable to set the color of the line, and calls the MoveTo and LineTo functions to set the starting and ending points of the line, and finally calls the stroke function to draw the line.

(2) Rectangle

You can use the FillRect (x, y, width, height) function to draw a rectangle with a background color, or you can use the Strokerect (x, y, width, height) function to draw only the outline of the rectangle, where parameters x and y are used to set the position of the rectangle on the canvas. They are relative to the upper-left corner of the canvas, and the width and height represent the widths and heights of the rectangles, in pixels. When you draw a rectangle using the FillRect function, you can set the fill color through the FillStyle property, which can be RGB, predefined colors (such as red Red, blue blue, and so on), hexadecimal colors, or gradients, and when you use the Strokerect function to draw a rectangle, You can set the color of the line through the Strokestyle property, and the color is the same as the FillStyle property.

(3) Polygon

Polygons (such as triangles, quads, and so on) are combined by drawing multiple lines. When drawing a polygon, use the moveTo function to set a starting point on the canvas and then use the lineTo function to draw multiple lines of the end-to-end line to form polygons based on the number of sides of the polygon multiple times.

(4) round

You can use the arc (x, y, radius, startangle, endangle, anticlockwise) function to draw a circle, where the parameters x and y represent the coordinates of the center, X is the horizontal axis, Y is the ordinate, in pixels; Radius represents the radius of the circle, StartAngle and Endangle represent the starting and ending radians of an arc, and the data type of the anticlockwise is of type bool, and when the value is true, the circle is drawn in a counterclockwise direction, otherwise it is drawn in a clockwise direction.

After describing the drawing methods for common graphics, here's an example of how to use JavaScript to draw these shapes on the canvas. Create a blank application project for a JavaScript Windows store and name it drawgraphapplication. Open the Default.html file, add a canvas element to the BODY element, and set the canvas's ID property value to Canvasid for easy retrieval of the control. The corresponding HTML snippet is as follows:

<body>

<canvas id= "Canvasid" width= "height=" ></canvas>

</body>

To control the appearance of the canvas on the application interface, add the following code in the Default.css file to control the layout of the canvas.

/* set the background color of the canvas and where it appears on the application interface */

#canvasID {

Background-color:gray;

margin-left:20px;

margin-top:20px;

}

Then double-click Open default.js file, in "Args.setpromise (WinJS.UI.processAll ());" Statement, add the following code to get the canvas and get the object associated with the canvas for drawing 2D graphics.

// get the appropriate canvas

var canvasobject = document.getElementById ("Canvasid");

// get used to draw from this canvas 2D objects of the graph

var contextobject = Canvasobject.getcontext ("2d");

// set the line color of all graphics to white

Contextobject.strokestyle = "RGB (255,255,255)";

// sets the line weight of all shapes to 2 Pixel

Contextobject.linewidth = 2;

In the preceding code, the getElementById function of the document object is called with "Canvasid" to find the canvas object with the id attribute value Canvasid and assigns a value to the Canvasobject variable. The GetContext function of the canvas object is then called by the variable Canvasobject to get the object associated with the canvas for drawing 2D graphics, and assigns the value to the ContextObject variable. The Strokestyle property of the object used to draw the 2D graphic is then called by the ContextObject variable to set the line color of all the shapes to white, and the line width of all the plots is 2 pixels by the LineWidth property.

Immediately followed by adding code to draw lines, rectangles, triangles, circles, hexagons, and fill squares, each of which describes the code for plotting each type of drawing. The JavaScript snippet that draws the line is as follows:

// Draw a line

Contextobject.beginpath ();// re-set drawing path

// The starting point of a line

Contextobject.moveto (100, 50);

// called LineTo function set end point

Contextobject.lineto (30, 120);

Contextobject.stroke ();

The above code first re-sets the drawing path by calling the Beginpath function through the contextobject variable, and then sets the start point's x-axis coordinates to 100 pixels and the y-coordinate to 50 pixels through the MoveTo function. and call the LineTo function to set the x-axis coordinates of the line end to 30 pixels, the y-coordinate to 120 pixels, and finally the stroke function to draw the line.

When you draw a rectangle, you call the Beginpath function to reset the drawing path, and then call the Strokerect function to draw a rectangle in the canvas that has an x-axis coordinate of 150 pixels, a y-coordinate of 50 pixels, a width of 70 pixels, and a height of 80 pixels. The corresponding code snippet is as follows:

// Draw a rectangle

Contextobject.beginpath ();// starts a new path to draw the next graphic

// draw a rectangular outline

Contextobject.strokerect (150, 50, 70, 80);

The snippet of the JavaScript code that draws the triangle is as follows:

// Draw a triangle

Contextobject.beginpath ();

// set the starting point to begin drawing the triangle

Contextobject.moveto (320, 50);

// draw three edges of the triangle in turn

Contextobject.lineto (270, 120);

Contextobject.lineto (370, 120);

Contextobject.lineto (320, 50);

Contextobject.stroke ();

In the preceding code, the drawing path is first re-set through the ContextObject variable call Beginpath function, and then the x-axis coordinates of the start point are 320 pixels and the y-coordinate is 50 pixels through the MoveTo function. Then we call the LineTo function three times to set the end coordinates of three edges to (270,120), (370,120) and (320,50), and finally call the stroke function to draw the line.

When you draw a circle, call the Beginpath function to reset the drawing path, and then call the ARC function to set the x-axis coordinate of the center to 70 pixels, the y-coordinate to 200 pixels, the circle radius to 38 pixels, the circle's starting and ending radians to 0 radians and 2π radians, and the drawing direction counterclockwise. Finally call the stroke function to draw the circle, and the corresponding JavaScript snippet is as follows:

// Draw a circle

Contextobject.beginpath ();

// called Arc function to draw an entire circle

Contextobject.arc (0, 2 * Math.PI, true);

Contextobject.stroke ();

When drawing a hexagon, the drawing path is also re-set using the Beginpath function and then called the MoveTo function to set the starting point with an x-axis coordinate of 190 pixels, a y-coordinate of 160 pixels, and then several calls to the LineTo function to set six edges with the end coordinates (150, 190). , (150, 230), (190, 260), (230, 230), (230, 190), and (190, 160), and finally call the stroke function to draw the line. The corresponding JavaScript snippet is as follows:

// Draw a hexagon

Contextobject.beginpath ();

// set the starting point to begin drawing the hexagon

Contextobject.moveto (190, 160);

// draw six sides of the hexagon in turn

Contextobject.lineto (150, 190);

Contextobject.lineto (150, 230);

Contextobject.lineto (190, 260);

Contextobject.lineto (230, 230);

Contextobject.lineto (230, 190);

Contextobject.lineto (190, 160);

Contextobject.stroke ();

The above draws a graphic with no fill color, and the following draws a square filled with color. After calling the Beginpath function to reset the drawing path, set the fill color to light gray with the FillStyle property, and then use the FillRect function to draw a square with an x-axis coordinate of 280 pixels, a y-coordinate of 160 pixels, and a width and height of 80 pixels. The corresponding code snippet is as follows:

// draw a square with a fill color of light gray

Contextobject.beginpath ();

// Set Fill Color

Contextobject.fillstyle = "Lightgray";

Contextobject.fillrect (280, 160, 80, 80);

Start debugging, the drawing is displayed on the canvas, the effect is shown in 19-31.

Figure 19-31 The effect of drawing a graphic on the canvas

WIN10 Series: JavaScript graphics