This is the ninth day of my participation in the August More text Challenge. For details, see: August More Text Challenge

background

In daily work and study, we must have more or less contact with the processing of pictures, we generally use img tag can solve most of our needs, but there are more advanced processing of pictures, that is, drawing.

What is the canvas

Canvas is a new TAB in H5. The official explanation is that Canvas is a canvas that can be used to draw images in web pages

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta Name ="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> */ canvas{background-color: #aaa; background-color: #aaa; } </style> </head> <body> <canvas width="500" height="500"> <script> var canvas = document.querySelector("canvas") <script> var CTX = <script> var canvas = document.querySelector("canvas" Canvas. GetContext ("2d") function img(){//ctx.drawImage(canvas. Var imgObj = new Image() // imgobj.src ="./img.jpg" Imgobj.onload = function (){ctx.drawimage (imgObj,100,100,300,300)} // Ctx.drawimage (imgObj,100,100,300,300)} img() </script> </body> </ HTML >Copy the code

What SVG

SVG can scale vector graphics. What is vector graphics? That is, graphics that can be enlarged or shrunk without distortion. When drawing SVG, each graph is inserted into the page as a DOM node, and we can manipulate these graphs directly through JS

The difference between Canvas and SVG

  • Graphics drawn by Canvas are generally bitmaps, that is, distortion will occur in the case of zooming in and out, while graphics drawn by SVG are vector images without distortion
  • A canvas drawing does not appear in the DOM structure; an SVG drawing does
  • Canvas is similar to animation. Every time a graph changes, the original one is cleared and the new one is drawn on it. SVG can directly perform some operations through JS
  • Canvas is resolution-dependent, SVG is resolution-independent
  • Canvas is best suited for graphics-intensive games, where many objects are redrawn frequently, and SVG is not suitable for gaming applications

conclusion

SVG has been around for more than a decade, and Canvas is gaining momentum. The advent of Canvas allows developers to draw graphics on web pages, synthesize images, and create more complex animations.