This is the 25th day of my participation in Gwen Challenge

We generally use SVG, Canvas and CSS3 to achieve front-end dynamic effects. Today, I want to make a comparison and summary of these three.

SVG

Scalable Vector Graphics

Predefined shape elements

Rectangle <rect> circle <circle> ellipse <ellipse> line <line> Polyline <polygon> path <path> path: M = moveto L = lineto H = horizontal line-to V = vertical lineto C = curveto (curve) S = smooth curveto (smooth curve) Q = horizontal line-to V = vertical lineto C = curveto (curve Two-dimensional Belzier curve T = smooth Belzier curveto A = Octagonal two-dimensional Belzier Arc Z = ClosepathCopy the code

Canvas

Define the drawing of graphics, that is, canvas

Rectangle rect circle arc line lineCap image draw path fill current drawing stroke Draw defined path beginPath start a path, MoveTo () moves the path to a specified point on the canvas without creating a line. LineTo () adds a new point, ClosePath () creates a path from the current point back to the starting point clip() cuts an area of arbitrary shape and size from the original canvas quadraticCurveTo() Creates a quadratic Bezier curve bezierCurveTo() ArcTo () Creates an arc/curve (used to create a circle or partial circle) arcTo() creates an arc/curve between two tangents isPointInPath() Returns a Boolean value if the specified point is in the current pathCopy the code

SVG is different from Canvas

1. The main difference between Canvas and SVG: Canvas is used to draw graphics by calling its API, while SVG is realized by building a tree of XML elements.

2. Canvas resolution dependent does not support event handlers Weak text rendering ability to save resulting images in.png or.jpg format is best suited for image-intensive games where many objects are frequently redrawn

SVG does not depend on resolution support event handlers and CSS to animate effects is best suited for applications with large rendering areas (such as Google Maps). High complexity can slow down rendering (any application that overuses the DOM is not fast) and is not suitable for games

In general, as the screen size increases, the canvas will start to degrade as more pixels need to be drawn. As the number of objects on the screen increases, SVG will start to degrade as we continue to add these objects to the DOM. These metrics are not necessarily accurate, and differences in implementation and platform, whether fully hardware-accelerated graphics are used, and the speed of the JS engine are bound to cause variation.

CSS3

Some effect summary

Border-radius: left top right top right bottom left bottom box-shadow: left bottom right top text-shadow: x, y, blur, color transition: Duration motion attribute Motion form Delay time Linear-gradient (direction, various colors); Linear radial-gradient(direction, shape, various colors); Radial gradient transform: Skew (); Transform: rotate(); Rotation of the transform: translate (); Translational transform: scale (); Animation: Name Time motion form Motion times Filter: None The default value has no effect. To do a linear multiplication on an image to make it look brighter or darker. Contrast Adjusts the contrast of an image. Input image opacity: invert invert input image opacity: invert image saturate: invert image saturation: sepia The URL function accepts an XML file 3D transform: transform: Perspective (800px) rotateX(); transform: perspective(800px) rotateY(); transform: perspective(800px) rotateZ();Copy the code