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

This article mainly introduces the relevant knowledge of canvas and svg use case analysis, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value, I believe you will have something to gain after reading this canvas and svg use case analysis article, let's take a look.

1.canvas canvas (bitmap)

two。 Draw a vector graph

Do not set the width and height of canvas in style, there will be displacement difference.

/ / get the element

Var c=document.getElementById ("c")

/ / obtain the drawing environment

Var c=c.getContext ("2d")

FillRect () draws a filled square with a default color of black

StrokeRect () draws a box with a border

Draw lines

MoveTo () draw the start point of the segment

LineTo () draws the collar point of the line segment

Each line can have only one moveTo and can have multiple lineTo

Stroke () draws line segments

The simultaneous occurrence of both beginPath () and closePath () closes the drawing path (connecting the first place of the start point and the end point)

Rect () draw a square

ClearRect (0BZ 0WidthMAH height) clear canvas

Save () restore () appears in pairs. The middle attribute style only affects the inside, not the outside.

1. Draw a circle

C.closePath ()

C.fill ()

C.restore ()

C.moveTo (200200)

C.arc (200, 200, 150, 150, 0, 360) Math.PIcord 180, true)

C.stroke ()

200200 is circular coordinates, 50 is radius.

0 is the start Radian Math.PI is the end Radian

True is counterclockwise. Flase is clockwise.

Note: the angle is positive and negative. The clockwise angle is positive and the counterclockwise angle is negative.

two。 Translation and rotation of canvas

Translate translate canvas size position unchanged initial coordinates have changed

Equivalent to coordinate translation

The rotation of the rotate () canvas is centered on the starting point of 00.

Scale (0.5 and 0.5) the scaling of the canvas is to move the canvas backwards to make the sight distance far and far away.

C. fillStylebirds lightpink'

C.scale (0.5, 0.5)

C.fillRect (0Pol 0100100)

Insert a picture into the canvas

/ / get the element

Var c=document.getElementById ("c")

/ / obtain the drawing environment

Var c=c.getContext ("2d")

Var img=new Image

Img.src= "img/02.jpg"

Img.onload=function () {

C.drawImage (img,10,20160200)

}

Insert font

/ / Font size style

C. Font = "30px imapct"

C.fillText ("the best in the whole station", 200200)

/ / Hollow font

C.strokeText ("Big smile!", 200200)

Svg

Svg drawing Vector Graph

Svg draws graphics using xml format

Svg should have a root node called svg tag equivalent to html

If the size of svg is not set, the default occupancy area is 3008 to 150.

1. Define rectangle

The rect tags are:

Width height rectangular width and height

Fill defines the rectangle fill color (RGB value, color name, or hexadecimal)

Stroke-width defines the width of a rectangular border

Stroke defines rectangular borders and colors

X defines the left position of the rectangle (the distance from the rectangle to the left side of the browser window)

Y defines the position of the top of the rectangle (rectangle to the top of the browser window)

Fill-opacity defines fill color transparency

Stroke-opacity defines border color transparency

Rx Ry can fillet a rectangle

The difference between fill-opactty and opacity?

Fill-opacity only changes the transparency of the fill color opacity changes the transparency of both fill and stroke

two。 Define circle

Circle cx cy defines the x and y coordinates of the dot. If cx and cy are omitted, the center of the circle is set to (0d0)

R define radius

3. Define Ellipse

An ellipse is very similar to a circle. The difference is that the ellipse has different x and y radii, while the x and y radii of the circle are the same

Ellipse cx cy defines the x-ray coordinates of the center of a circle

Rx defines horizontal radius

Ry defines the vertical radius

4. Define a line

Line x1 y1 definition start coordinates x2 y2 definition end coordinates must be combined with stroke

5. Define polygons

Polygon poinits= "defines the x and y coordinates of each corner of a polygon"

6. Define a curve (broken line)

Polyline poinits "coordinates of break points"

7. Define path

D = "define path instruction"

M is the starting point coordinate

L is the coordinate of the adjacent point

Z is to make the path form a closed loop.

H stands for horizontal dash and the default value on the y-axis is exactly the same.

V represents a vertical line with the same default value on the x-axis.

An is followed by seven values

8.g is used to combine related elements

All the attribute child elements on g will inherit, but all attributes on g must show the attribute, which is not private to svg, for example, the center coordinate on g is not good.

Transform transform an attribute translate rotate scale in svg

Translation and rotation take the starting point 0 0 (the upper left corner of svg) as the reference point, while in css3, the center point of the element is taken as the reference point.

The value used by text to define the text xy xy is in the lower left corner of the font

Ha ha ha ha

9. Draw a picture

10.use is used to copy the element xy

Xy is the relative coordinate of the original element, not the 00:00 coordinate of the relative svg.

11.animate is written in the middle where animation elements are needed.

This is the end of the article on "canvas and svg usage case Analysis". Thank you for reading! I believe you all have a certain understanding of the knowledge of "canvas and svg use case Analysis". 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.