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

This article mainly explains "the summary of basic knowledge of canvas". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn the "canvas basic knowledge summary" bar!

1. Fill the rectangle fillRect (xrem yrew width height)

2. Draw a rectangular border strokeRect (xrem yrew widththheight)

3. Erase the rectangle clearRect (xpenery yrewth height)

4. Fill pattern fillStyle= "red"; styles can be colors, gradients and images.

5. Stroke style strokeStyle= "red"

6. The width of the stroke line lineWidth=4

7. LineCap= "butt" at the end of the line; butt (docking) / round (circle) / square (square), which is butt by default

8. Line intersection style lineJoin= "miter"; miter (sharp corner) / round (fillet) / bevel (bevel), default sharp corner

9. Start drawing the path beginPath ()

10. End the path closePath (); after creating the path, if you want to draw a line connecting to the beginning of the path, you can call closePath ()

11. Draw the arc arc (xMagneyGravity radiusGraduestartAngleGradeEndAngleRegent truepoint false)

12. Draw an arc arcTo (x1magentin x2rect y2radius) draw an arc of the sky from the previous point to x2Magi y2, and pass through x1jie y1 with a given radius radius

13. MoveTO (xmeny); move the drawing cursor to (xmemy) without drawing a line

14. LineTo (xQuery); draw a straight line from the previous point

15. Quadratic Bezier curve: quadraticCurveTo (cx,cy,x,y); draw a quadratic curve from the previous point to XQuery y, with cx,cy as the control point.

16. Cubic Bezier curve: bezierCurveTo (cx1,cy1,cx2,cy2,x,y); draw a quadratic curve from the previous point to XQuery y, with cx1,cy1 and cx2,cy2 as control points.

17. Rect. Draw the rectangle from the point XQuery y. The width and height are specified by width and height, respectively. This method draws a rectangular path, not a separate shape.

18. Draw text:

(1) populated text: fillText ("hello", xjournal width); width is the optional maximum pixel width, and if the text is greater than the maximum width, the text shrinks to fit the maximum width.

(2) text Stroke: strokeText ("hello", XMagne y width); width is the maximum pixel width that can be selected.

(3) text style: font= "bold 14px Arial"

(4) horizontal text alignment: textAlign='start'; / / start, end, left,right, center. Default value: start. Aligns with the vertical axis based on the starting point of the text (xrecoery y).

5) Vertical text alignment: textBaseline='alphabetic'; / / top, hanging, middle,alphabetic, ideographic, bottom. Default value: alphabetic. Aligns with the horizontal axis based on the starting point of the text (xrecoery y).

(6) the width of the text: var text= "hello"; var length=context.measureText (text); parameter text is the text to be drawn

19. Transformation

(1) rotate (angle): rotates the image angle radians around the origin.

You can also use transform (Math.cos (angle*Math.PI/180), Math.sin (angle*Math.PI/180),-Math.sin (angle*Math.PI/180), Math.cos (angle*Math.PI/180), 0mem0)

(2) scale (xQuery): zooms the image. You can also use transform (xmem0re0pc0re0pc0p0p0p0p0p0p0p0p0)

(3) translate (xmeny): move the origin of the coordinates to xmeny. After performing this transformation, the coordinate 0memo will become the point previously represented by xmeny. You can also use transform (1pd0re0re0pc0p0pl xrey).

(4) transform (, x, y)

(5) setTransform (, x, y); reset the transformation matrix to the default state, and then call transform ()

20. Graphic combination

The code is as follows:

Context.fillStyle= "blue"

Context.fillRect (101010100100)

Available values for context.globalCompositeOperation='lighter'; are as follows: / * * /.

Context.fillStyle= "red"

Context.arc (110, 60, 50, 0, 0, Math. PIQS, 2, false)

Context.fill ()

/ *

Source-over (default):

Destination-over: draw a new graph under the old one

Source-in: the new graphics perform in operations with the original graphics, showing only the parts of the new graphics that overlap with the original graphics.

Destination-in: the in operation is performed between the original graphics and the new graphics, showing only the parts of the new graphics that overlap with the original graphics

Source-out: the out operation is performed between the new graphics and the original graphics, showing only the parts of the new graphics that do not overlap with the original graphics

Destination-out: the out operation is performed between the new graphics and the original graphics, showing only the parts of the new graphics that do not overlap with the original graphics

Source-atop: only draw the parts of the new graphics that overlap with the original graphics and those that are not overlapped.

Destination-atop: only draw the parts of the original graphics that are overlapped by the new graphics and the other parts of the new graphics

Lighter: both the original and new graphics are drawn, and the overlapping parts are treated with color addition.

Xor: only draw the parts of the new graphics that do not overlap with the original graphics, and the overlapping parts become transparent

Copy: only draw new graphics

, /

21. Draw graphic shadows

The code is as follows:

Lateral displacement of context.shadowOffsetX=10; / / Shadow

Longitudinal displacement of context.shadowOffsetY=10; / / Shadow

Context.shadowColor='rgba'; / / the color of shadow

Blurred range of context.shadowBlur=7; / / Shadow

22. Draw, tile, and crop images

The code is as follows:

Context.drawImage (image,x,y)

Context.drawImage (image,x,y,w,h)

Context.drawImage (image,sx,sy,sw,sh,dx,dy,dw,dh); sx,sy and sw,sh are the starting coordinates and height of the copied region of the source image, and dx,dy and dw,dh are the target coordinates and height of the copied region.

Context.createPattern (image,type); Image tiling. Parameter can be: no-repeat,repeat-x,repeat-y,repeat

Context.clip (); / / clipping function

Example:

The code is as follows:

Image=new Image (); / / create an Image object

Image.src= ".. / images/wukong.gif"

Var test=context.createPattern (image,'repeat-y'); / / createPattern sets the tiling effect

Context.fillStyle=test

Context.fillRect (0J0400400)

Image.onload=function () {/ / the purpose of this method is that if the picture is a large network image file, prevent the image from being seen after all the images have been loaded, so that you can load and draw at the same time.

DrawImg (context,image)

}

Function drawImg (context,image) {

/ / draw the original image

Context.drawImage (image,10,10125125)

/ / Local magnification

Context.drawImage (image,20,0,90,100,150,10125125)

Context.rect (20, 80, 80)

Context.clip ()

Context.drawImage (image,0,0200200)

}

23. Save, restore

Contex.save (); saves the current state to the stack. Note: only the settings and transformations of the drawing are saved, and the contents of the drawing are not saved.

Context.restore (); retrieves the previously saved drawing state from the stack

Where it can be applied:

(1) Image or graphic deformation

(2) Image clipping

(3) when changing the attributes when changing the context of a drawing: fillStyle,font,globalAlpha,globalComposite-Operation,lineCap,lineJoin,lineWidth,miterLimit,shadowBlur,shadowColor

ShadowOffsetX,shadowOffsetY,strokeStyle,textAlign,textBaseline

24. Linear gradient

The code is as follows:

Var g=context.createLinearGradient (xStart,yStart,xEnd,yEnd)

Var g1=context.createRadialGradient (xStart,yStrat,radiusStrat,xEnd,yEnd,radiusEnd)

G.addColorStop (0djinred`)

G.addColorStop (0dint green)

Context.fillStyle=g

Context.fillRect (0Pol 0200200)

At this point, I believe you have a deeper understanding of the "summary of basic knowledge of canvas". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.