1. The efficiency of CSS3 is seriously reduced when there are many DOM nodes.
2. CSS3 rotation is better than canvas (2d).
3. CSS3 text rendering is better than canvas.
4. Canvas can be operated at a lower level.
5. Canvas supports webgl, which can kill everything instantly.
6. Canvas (2d) compatibility is pretty good.
7. The webgl compatibility is terrible and the mobile platform support is not good.

Please use CSS3 for web page effects; use canvas for applications, games, and charts; if you feel that CSS3 is not free enough when displaying data, or canvas is too troublesome, you can use SVG.

css3

Not very familiar
animate.css
lesscss
There are also some tools for making CSS3 animations, but I haven’t seen any satisfactory ones...

canvas

cocos2d-html5
canvasengine
three.js
fabricjs

svg

It is rarely used, so this is barely considered one?
d3js

The first thing I thought of was that the compatibility of svg is better than that of css3. svg supports IE8 . Some attributes of css3 and html5 are not supported under ie8

Secondly, saying that CSS3 can be combined with DOM like SVG is a bit flattering. SVG is based on XML. It has a good structure and is suitable for modification and extension. If it is rewritten with CSS3, it will be HTML, which is not semantically correct. , the structure also needs to be designed and optimized by engineers themselves, and its scalability and modification capabilities are far inferior to svg. Therefore, for complex graphics, svg has obvious advantages, and for simple graphics, it can be said that css3 is almost the same as svg.

For canvas, because it is more closely integrated with js, some logical operations are much more convenient than css3. For example, using canvas to write animations and games frame by frame will be more difficult to implement with css3.

In fact, I think css3 is still an extension of css, more from the consideration of extending style performance. From a program logic point of view, it can only be achieved by simulation. In this regard, the canvas that relies on js is still relatively large. advantages.

The operation of canvas is lower level (when using WebGL) and more efficient. It may become a new game platform in the future

The application scenarios of the three are different.

• CSS3 removes text effects, borders, rounded corners, multiple backgrounds, multiple columns, etc. It should be said that the main significance is in animation, transition and other effects compared to the previous CSS2.1, which has made greater innovations, here I made a little comparison between animation, transition and transform.

• I wrote an article here about svg vs. canvas, maybe you can learn from it. As a new H5 technology, canvas is efficient and simpler than SVG. For most Front-end students are more familiar with it. Canvas is also used Data visualization has gained the favor of many people. But aside from browsers, svg has overtaken Canvas in many other scenarios because of its seniority and the original intention of launching Canvas was only considered in browsers. However, svg still has a place in browsers. For example, I recommend an svg The icon library Icomoon allows you to customize svg files, and then simply add the corresponding class to easily create a new icon. To avoid the dom shortcomings of svg, it can be said that such icons are of high quality, scalable, and are not sensitive to screen size. It is said that the larger the screen, the more obvious the advantage.

• From a comprehensive comparison, the main significance of the graphics part of css3 is "animated 2D3D transition effect". The reason for the quotation marks is because the real 3D big head actually lies in the difficult to chew WebGL. With the rise of H5, browsers The big head of 2D lies in Canvas.css3, svg, and canvas. No one can eliminate anyone for the time being, unless css3 You can draw better graphics yourself, not just bring better animation transition effects; and svg (the background is adobe and ms), canvas is more focused on css3 (the latter two backgrounds should be considered webkit series) Static and vector graphics are completely different in nature, each has its own advantages, and they cannot be replaced.

• If the standards for browser graphics can be made more unified in the future, there may be fewer technologies with more advantages; but this is not currently possible.

I really don’t know how to answer it. I’m just here to take a look. Come on