H5 small content (4), h5 content

H5 small content (4), h5 content

SVG
Basic Content
SVG does not belong to HTML5 proprietary content
HTML5 provides native content about SVG
Before HTML5 appeared, there was SVG content.
SVG is simply a vector graph.
The extension of the SVG file is ". svg"
SVG uses XML syntax.
Concept
SVG is a language that uses XML technology to describe two-dimensional graphics.
SVG features
SVG drawing can be captured by search engines
SVG is amplified without degrading the image quality.
Differences between SVG and Canvas
SVG
Resolution independent
Event binding supported
Large rendering area programs (such as Baidu map)
Cannot be used to implement web games
Canvas
Dependency resolution
Event binding is not supported.
Best Web games
Save as an image in. jpg format
Purpose
Small icons in the webpage
Dynamic Effects (animation effects) on webpages)
Use SVG in HTML5
Use the <svg> </svg> element
Function-similar to the <canvas> element
The default size is 300px 150px.
Use CSS styles
To draw a graph using SVG, you must define the <svg> element.
Drawing
Rectangular Element
<Rect x = "" y = "" width = "" height = "/>
Circular Element
<Circle cx = "" cy = "" r = ""/>
Elliptical Element
<Ellipse cx = "" cy = "" rx = "" ry = "">
Line Element
<Line x1 = "" y1 = "" x2 = "" y2 = "/>
Line Element
<Polyline points = "">
Polygon Element
<Polygon points = ""/>
Special effect elements
Gradient-gradient elements are defined in <defs> elements.
Linear Gradient-<linearGradient>
This element is the starting element.
<LinearGradient x1 = "%" y1 = "%" x2 = "%" y2 = "%">
<Stop offset = "%" stop-color = "color"/>
</LinearGradient>
Sector (Ray) gradient-<radialGradient>
Filter-Gaussian blur
Filter Elements
<FeGaussianBlur> element-Gaussian blur
In = "SourceGraphic"
StdDeviation-set the Blur degree
Note-defined in the <defs> element
TWO. js
Basic Content
JS library Introduction
Three. js-used to draw 3D images
Two. js-used to draw two-dimensional images
Formats supported by two. js
SVG-Default
Canvas
WebGL-used to draw images
How to use two. js
Introduce the two. js file to the HTML page
Define a container on the HTML page (<div>)
In javascript code
Get the container in the HTML page
Create a Two object and add it to the container.
New Two (params). appendTo (Element );
Use the API method provided by two. js to draw
Use the method provided by two. js to set the image
Use the update () method to draw
Create a Two object
Constructor-new Two (params)
Params parameter-set the information of the current object
Type-set the current format (Two. Types. svg)
Svg-default value
Canvas
Webgl
Width and height-set the width and height
Fullscreen-set whether to enable full screen
Boolean value. true indicates full screen.
Graphical Method
MakeLine ()-draw a line
MakeRectangle ()-draw a rectangle
MakeCircle ()-draw a circle
MakeEllipse ()-draw an ellipse
Animation Method
Update ()-update an animation
Play ()-add an animation (loop)
Pause ()-delete an animation
Set the drawing style
Returns the drawing object when the Two object drawing method is called.
Use this graphic object to set relevant property values
Group operations
Two. Group
Animation Effect
Bind (event, callback) method-event binding
Event-bind event name
Update-functions of the update () method
All DOM events can be bound.
Callback-event processing functions