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

This article mainly shows you "what is the drawing API of canvas in html5", which is easy to understand and clear, hoping to help you solve your doubts, the following let the editor lead you to study and learn "what is the drawing API of canvas in html5" this article.

When painting, canvas is equivalent to canvas, while context is equivalent to a paintbrush.

1. Draw lines

MoveTo (x0Query y0): move the current brush (ictx) to the position (x0meny0).

LineTo (x1 ~ Y1): draw a straight line from the current position (x _ 0 ~ ~ y _ 0) to (x _ 1 ~ 1).

BeginPath (): open a path or reset the current path.

ClosePath (): returns from the current point to the starting point of the path, that is, the location, avoidance, and path of the previous beginPath.

Stroke (): draw. You have to add this function to draw, so this must be at the end.

Var icanvas=document.getElementById ("iCanvas"); var ictx=icanvas.getContext ("2d"); ictx.beginPath (); ictx.moveTo (0memo); ictx.lineTo (300150); ictx.lineTo (3150); ictx.closePath (); ictx.stroke ()

Effect:

Note here that if closepath is placed after the stroke function, it will not be drawn as a closed line, because it has been drawn before closing, so the line on the left will not be drawn.

two。 Line styl

LineCap: line end style, butt,round,square.

LineJoin: the inflection point style when two lines intersect, and when set to miter, you can also set the maximum length at the inflection point intersection through miterLimet.

MiterLimet: if the miter length exceeds the value of miterLimit, the edges and corners will be displayed as the "bevel" type of lineJoin.

LineWidth: line width

StrokeStyle: line color, gradient (defined gradient object), mode. Context.strokeStyle= "# 333"

Var iCanvas=document.getElementById ("iCanvas"); var ictx=iCanvas.getContext ("2d"); ictx.beginPath (); ictx.strokeStyle= "# 0000ff"; ictx.lineWidth=20;ictx.lineCap= "round"; ictx.moveTo (10Power10); ictx.lineTo (80Power80); ictx.stroke (); ictx.beginPath (); / / beginPath is required here, otherwise the conversation will always be based on the first, and at the end of stroke, a black slash will be drawn again, with a total of three lines. Ictx.strokeStyle= "# 000000"; ictx.lineCap= "butt"; ictx.lineWidth=10;ictx.moveTo (80, 10); ictx.lineTo (10, 80); ictx.stroke ()

BeginPath and closePath can not appear in pairs, and there is almost no relationship between them. ClosePath is used to draw a closed path between the end point and the starting point.

3. Draw a curve

Arc: draw a curve, radius is the radius of the curve, startAngle,endAngle start angle and end angle, using the Radian (Math.PI/180) * angle value, anticlockwise drawing direction

ArcTo: draw the curve before two tangents.

Ictx.beginPath (); ictx.moveTo (20); / / create the starting point ictx.lineTo (100); / / create the horizontal line ictx.arcTo (150); / / create the arc ictx.lineTo (150120); / / create the vertical line ictx.stroke ()

The start point of the drawing curve and the end point of the horizontal line are tangent to the connection of the first set point, and the end of the curve and the first set point are tangent to the connection of the second set point.

QuadraticCurveTo (x _ 1 ~ (1), x _ 2): quadratic Bezier curve. The coordinates of the control point, the coordinates of the end point.

BezierCurveTo (x1quence y1menx2recovery2magorx.y): cubic Bezier curve. The coordinates of control point 1, the coordinates of control point 2, and the coordinates of the end point.

Bezier curves are very useful when drawing some very smooth curves.

4. Draw rectangles and fill

Rect (): create rectangle

FillRect: draw the filled rectangle: (xPowery) starting point, width,height rectangle width and height

StrokeRect (): draw a rectangular wireframe

ClearRect (): clears the rectangle.

Ictx.fillStyle= "# 0000ff"; / / set fill color ictx.fillRect (20pm 20150100); ictx.strokeRect (180jol 20100100)

5. Brush attribut

FillStyle: sets the color, gradient, or mode of the fill (patten)

StrokeStyle: the color, gradient, or mode of the brush

6. Draw Shadow

ShadowColor: shadow yanse

ShadowBlur: blur level

ShadowOffsetX: horizontal distance of shadow

ShadowOffsetY: vertical distance of shadow

Ictx.shadowBlur=20;ictx.shadowColor= "# 456"; ictx.shadowOffsetX=-10;ictx.shadowOffsetY=30;// sets shadows before drawing rectangles ictx.fillStyle= "# 108997"; ictx.fillRect (20, 20, 100, 80); ictx.stroke ()

7. Draw a gradient

CreateLinearGradient: draw a linear gradient, the starting point of the gradient, and the end point of the gradient. Vertical or horizontal gradients can be made in different positions.

CreateRadialGradient: radial gradient:, (x1Powery1) is the center of the starting point of the gradient, R1 is the radius, (x2Query y2) is the end point of the gradient, R2 is the radius of the end point.

Both gradients need to be used

AddColorStop (stop,color) to set the gradient process, stop is a value of 0.0 to 1.0.

Var grd=ictx.createLinearGradient; grd.addColorStop (0, "# 378923"); grd.addColorStop (0, "# 378923"); grd.addColorStop (1, "# ddd"); ictx.fillStyle=grd;// is an object here, which is used to pass the value ictx.fillRect to fillstyle (20Jing 20150100); var grd=ictx.createRadialGradient (300325,15250225100); grd.addColorStop (0, "# 345"); grd.addColorStop (1, "# fff"); ictx.fillStyle=grd;ictx.fillRect (200150150100)

8. Fill the background

CreatePattern (image, "repeat | repeat-x | repeat-y | no-repeat"): image is an image object, and the following parameters are used to set the way the image is repeated.

9. Other related API

Fill (): populates the current path.

IsPointInPath (): ictx.isPointInPath (xQuery y); determine whether the point is in the current path

Clear the canvas method: get the width and height of the canvas, icanvas.height,icanvas.width; and then use clearRect ()

Modify the width and height of the canvas: the method of icanvas.width='200';icanvas.width='300'.

GlobalAlpha: set the transparency, which can only be a number of 0x1. If the transparency is different, you can reset it before painting the second picture.

ToDataURL:icanvas.toDataURL (type,encoderOptions). This function returns the URI of a base64 of image. All the parameters are optional. Type can set the image type such as image/jpeg,image/webp. By default, image/png;encoderOptions is a number of 0: 1, which is used to set the image quality of image/jpeg,image/webp. This parameter is invalid for type settings in other formats.

10. Tailoring

Clip (): cut a canvas of any shape and size from the canvas, after which all drawings are limited to the clipped area. This method is usually used with drawing rectangles, circles, etc., after which the image is cut, and the later painting must be on the cut canvas.

Ictx.arc (100Jing 100jue 50, (Math.PI/180) * 0, (Math.PI/180) * 360LJ true); ictx.stroke (); ictx.clip (); ictx.fillStyle= "green"; ictx.fillRect (0pj0150100)

If you still want to manipulate the external canvas, use the save () function to save before cutting, and use the restore () function to restore the previously saved state after cutting, but the operation done in the middle will not disappear.

The above is all the content of the article "what is the drawing API of canvas in html5?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, 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.