Shulou(Shulou.com)06/01 Report--

This article mainly introduces the HTML5 Convas APIs method of how to use the relevant knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this HTML5 Convas APIs method how to use the article will have a harvest, let's take a look at it.

☆ canvas.getContext ('2d')

It is not possible to draw directly in convas, and it is necessary to use this method to obtain its two-dimensional drawing context.

☆ context.beginPath ()

Represents the path to start.

☆ context.isPointInPath (XBI y)

Determine whether a point is on the path. This method is not applicable after the coordinate system is transformed.

☆ context.moveTo (XBI y)

It is equivalent to lifting the brush from the artboard, leaving the tip away from the artboard, and then positioning the tip at the (xmemy) coordinates to start a new replacement at this new location.

☆ context.lineTo (XBI y)

Equivalent to the brush tip does not leave the artboard, the brush tip moves from the current coordinate position to the (xPowery) coordinate, replacing a line segment.

☆ context.stroke ()

After drawing on convas, some drawing operations must call this method in order for the drawing to be displayed.

☆ context.save ()

This method saves the current state of convas, or any future changes to convas, as long as you save the convas state before making these changes, and you can later call the context.restore () method to revert to the saved state. You should usually save the original state of convas (without any drawing or change) before a new replace or modify operation, and restore it to its original state each time after a new paint or modify operation ends. This is good for future drawing operations. In fact, there are many attribute adverbial clauses in the 2D drawing environment of canvas: some methods are related to the state, and when the value of each property is changed (or use some method to change the drawing state), the drawing state changes. If it is saved after each change, the state of multiple attributes will be saved in the form of stack (heap), and the industry interpretation law of the party can be called back and forth to the corresponding saved state many times according to the order of the stack.

☆ context.translate (XBI y)

This method moves the origin of the current coordinates to (xPowery).

☆ context.restore ()

Restores the convas state to the last saved state.

☆ context.closePath ()

The behavior of this command is very similar to the lineTo function, except that the destination is automatically regarded as the starting point of the path. However, closePath also notifies the canvas that the current shape has been closed or that a fully contained area has been formed. This is useful for future fills and strokes. At this point, you can continue to use more segments in the path to create other subpaths. Alternatively, you can start over at any time using beginPath and completely clear the path list.

☆ context.fill ()

Fills the closed path after the fill pattern is set. You no longer need to call the context.stroke () method after calling this method.

☆ context.fillRect (XBI y, width, height)

Draw and fill a rectangular area with width and length (width, height) at (XQuery Y). You no longer need to call the context.stroke () method after calling this method.

☆ context.strokeRect (xperience, widthand height)

Lay out a rectangular outline with a width and length of (width,height) at (xPowery).

☆ context.clearRect (xperience, widthand height)

Clears everything in the rectangular area and resets it to its original transparent color. Clear the rectangular area whose location (upper-left corner of the rectangle) is in (xPowery,) and whose size is (width, height). The ability to clear rectangles in the canvas is central to creating animations and games using HTML5 Canvas API. The illusion of animation can be presented by repeatedly drawing and clearing parts of the canvas, and many such examples already exist on Web. However, to create a smooth running animation, you will need to take advantage of the clipping feature and perhaps even an auxiliary buffered canvas to minimize flicker caused by frequent canvas cleaning.

☆ context.drawImage ()

Context.drawImage (img,x,y) on (x), this method has three overloads that place the image on the canvas. The image source can be an img tag on a page, an image object in JS, and a frame of video. Context.drawImage (img,x,y,w,h), then an image img image is used at y). When the size of the canvas is larger than the image, the entire image is laid out; when the image is larger than canvas, the extra part is cropped. Use the rectangular region where the length and width of the image img are (w) h at (x ~ m y). The size of the image will be changed to (wrecom h). Context.drawImage (img,imgx,imgy,imgw,imgh, cx,cy,cw,ch) takes an img image as a layout object, clips an area of (imgx,imgy) size (imgw,imgh) on the img, and places context.drawImage (video, vx,vy,vw,vh,cx,cy,cw,ch) at a position (cx,cy) inside the canvas (cw,ch). If the cropped area on the image is out of range of the image, an exception is thrown. As a drawing object, the video object grabs a frame of (VX,VY) size (VW,VH) on the video and a (CW,CH) area of (CX,CY) on the canvas where it is drawn. The first parameter of drawImage () can also be another canvas.

☆ context.getImageData (xperience, widthand height)

This method gets an area of size (width, height) from the internal position of the canvas (xrem y), and returns an ImageData object. ImageData has three properties: width, height and data. The data attribute is an array in which every four consecutive elements of the array represent a pixel, and the four consecutive elements in turn contain the color and transparency information of the RGBA. Four consecutive metametypes must belong to one pixel, and the position of the first element is not random. The array of pixels is scanned in the specified area of the canvas from top to bottom and from left to right. The number of elements arranged in turn is width * height * 4. To get tips for a specific location. Web pages that use this method to open as local files in a browser will not work properly and will usually produce security errors (security errors). You can upload the file to the Web server and request access to resolve the problem. And, when it comes to images, JS and HTML must be, however, IE9 can be accessed through local files. An example is as follows:

Copy the code

The code is as follows:

/ / get an expected area var imageData = context.getImageData (0memo 0rem 3jin3); / / 3x3 grid

Var width = imageData.width; / / location specific to the expected area var x = 2; var y = 2; / / the index of the corresponding element of the green color in the predetermined size var pixelRedindex = ((ymer1) * (width * 4)) + ((xMel 1) * 4); var pixelGreenindex = pixelRedindex + 1; var pixelBlueindex = pixelRedindex + 2; var pixelAlphaindex = pixelRedindex + 3

Var pixel = imageData.data; / / CanvasPixelArray

Var red = pixel [pixelRedindex]; var green = pixel [pixelGreenindex]; var blue = pixel [pixelBlueindex]; var alpha = pixel [pixelAlphaindex]

☆ context.createImageData (WBH)

Produces an ImageData object of the size (w _ ImageData h), and the meaning of the ImageData object is the same as the ImageData object obtained by getImageData ().

☆ context.putImageData (ImageData,x,y,x1,y1,w,h)

Draw an ImageData object onto the canvas (XQuery Y). Collins selects the four English parameters, which are used to set the position and size of a cropped rectangle.

☆ context.createLinearGradient (x1century y1rex2penny y2)

A linear perpendicularity is generated between (x1) and (x2). Such as:

Copy the code

The code is as follows:

Var gradientName = context.createLinearGradient (- 5,-50)

☆ Gradient.addColorStop (offset, color)

The color parameter is the color to apply in the stroke, or the color to fill at the offset position. The value of the offset position is between 0.0 and 1.0, representing the distance that should be reached along the gradient line to the color. Such as:

GradientName.addColorStop (1)

Color can use the rgba function in CSS to generate transparent gradients, such as:

Copy the code

The code is as follows:

/ / generate 50% transparent color gradient gradientName.addColorStop (0.2 minus rgba)

☆ context.createRadialGradient (x0qery y0rer 0rec x1rect y1rer 1)

The first three parameters represent a circle with a radius of R0 centered on (x0), and the last three parameters represent a second circle with a radius of R1 centered on (x1). Draws a gradient across the area between two circles.

☆ context.createPattern (img,'repeatPattern')

A strokeStyle style or a filled fillStyle style is generated with an image img that repeats a path of type repeatPattern. The value of repeatPattern can get one of repeat,repeat-x,repeat-y and no-repeat. Such as:

Copy the code

The code is as follows:

Context.strokeStyle = context.createPattern (gravel,'repeat')

The parameter img can also be another canvas or video

☆ context.scale (xMultiple,yMultiple)

The two parameters specify the scaling multiple of the object in the x and y directions, respectively, with a scale greater than 1 to zoom in and a zoom out between 0 and 1. If it is a negative value, you can achieve reflection, flip and other effects.

☆ context.rotate (Angle)

Used to rotate the context of the drawing environment, using the current coordinate origin as the center of rotation, in radians, in conjunction with Math.PI. The parameter angle rotates clockwise when it is positive and counterclockwise when it is negative.

☆ context.transform (ScaleX,skewY,skewX,ScaleY,transX, transY)

The scaling of ScaleX and ScaleY in x and y coordinates, respectively. SkewY is the vertical shear of the control context, and its value can be positive or negative of any size. This function is used to control the size and shear and position of drawing objects and is a transformation matrix. Floating point or integer, equivalent to vertical coordinate, Y = Y + skewY * x.skewX is a shear that controls the context level, and its value can be a positive or negative floating point or integer of any size, equivalent to x = x + skewX * y on the Abscissa. The function of the last two parameters is equivalent to that of the two parameters in translate (XMagol y).

☆ context.setTransform (ScaleX,skewY,skewX,ScaleY,transX,transY)

This method can be converted, but the conversion method will be combined with the previously applied conversion, scaling and rotation methods, resulting in a complex composite conversion effect. The setTransform method can apply the transition from the original state of the context and will not be the same as the previous transition. Generic context.setTransform (1, 0, 0, 1, 0, 0) restores the transition state of the context to its original value.

☆ fillText (text, xQuery y, maximum width)

Draw text filled with text at (XQuery Y) coordinates. Maxwidth optional English parameter, used to limit the width of all text and the sum of text spacing, all adverbial clauses: spacing width exceeds this value, then the width of a single text character and character spacing will be compressed, a single character becomes slender and the spacing becomes smaller. You can draw filled text with attributes such as context.font,context.fillStyle,context.textAlign.

☆ strokeText (text, xQuery y, maximum width)

The optional English parameter of maxwidt is used to limit the width of all text and the sum of text spacing. If the width of adverbial clause: spacing exceeds this value, a single text can be placed with attributes such as context.font,context.textAlign,context.lineWidth,context.strokeStyle. For example

Copy the code

The code is as follows:

Var fontSize = 100; context.font = fontSize + "px Arial"; while (context.measureText ("Hello world!" ). Width > 140) {fontSize--; context.font = fontSize + "px Arial";} context.fillText ("Hello world!" , 10d10); context.fillText ("Font size is" + fontSize + "px", 10pr 50)

☆ context.measureText ("text")

This method calculates the size of the area occupied by the text based on the current font, textAlign, and textBaseline values. The text method is the text content used for placement. This method returns a TextMetrics object, which currently has only one width property, and may provide more properties in the future.

☆ context.rect (xpencil ypencil wpenh)

Place a rectangle with a width of w and a height of h at the point (xPowery). The current point is ignored. However, when the top of the rectangle is aligned (xrecoery y), it becomes the new current point.

☆ context.arc (XGravity, counterclockwise, endAngle)

XQuery y is the center coordinate of the arc; radius is the arc radius; startAngle,endAngle is the starting Radian and the ending Radian, respectively, in radians, the length rate π is expressed by Math.PI, the Radian of variable 0 is horizontal to the right; counterclockwise represents the direction of the Radian, which is an optional parameter, Boolean value, which is really counterclockwise and false. For clockwise, the default is false. Use this method to omit lineTo. After the method draws an arc using this method, the next path turn starts at the end of the arc.

☆ context.arcTo (x _ 1 ~ y _ 1 ~ x _ 2, radius)

The current point forms a line L1 with (X1Magi Y1), another line L2 with (X2Magi Y2), and the third line L3 with (X2Magi Y2). (X1, y1) is the origin, L1 and L2 are coordinate axes, tangent to L1 and L2, the radius is radius, and the radius is on circle O1 in the same quadrant as "line segment" L3, the tangent point with L1 is p1, there are two arcs between p1 and p2 on L2 circle O1, and the arc nearer to the inner origin (x1pl) (which is also the allowed arc on the circle) is the arc placed.

In addition, a line segment connected to the arc is drawn between the current point and (X1MagneY1), because the path drawing is continuous, and the line segment between the current point and (X1PowerY1) is drawn first, followed by the arc. Tangent point p2 becomes the next current point. This method is often used to draw rounded rectangles.

☆ context.quadraticCurveTo (x1century y1rex2penny y2)

A quadratic Bezier curve segment is placed at the current coordinate and (x2jiny2), and the degree of curvature is controlled by (x1Powery1). (x1 ~ Y1) is not on the curve segment.

Other options for curves in HTML5 Canvas API include the bezierCurveTo,arcTo and arc functions. These curves use other control points, radii or angles to determine the characteristics of the curve.

☆ context.bezierCurveTo (cp1x,cp1y,cp2x,cp2y,x,y)

Place a cubic Bezier curve between the current point and (xQuery y) with the degree of curvature controlled by control points (cp1x,cp1y) and (cp2x,cp2y).

☆ context.clip ()

This method creates a clip region (clip region) based on the last placed replacement path. The clip region is equivalent to a mask, and then the replacement content is displayed only if it falls inside the clip area.

☆ context.isPointInPath (XBI y)

Detects whether the coordinates (xther y) are inside the path that has been replaced. The return is called true or false.

☆ canvas.toDataURL (type,args)

This method can convert the canvas into an image, which is based on Base64 coding such as. If two parameters are not specified, the method is called without parameters, and the converted image format is in PNG format. Type: specifies the image format to convert, such as image / png,image / jpeg, etc. Args: optional parameter. For example, if type is image / jpeg, args can be a value between 0.0 and 0.1 to specify the quality of the image. For example, the following code opens what has been painted in the canvas in a new browser window or tab:

Copy the code

The code is as follows:

Var canvas = document.getElementById ("myCanvas"); window.open (canvas.toDataURL ("image / png"))

This is the end of the article on "how to use the Convas APIs method of HTML5". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use the Convas APIs method of HTML5". If you want to learn more, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.