What about the canvas of HTML5?

• What is canvas

<canvas> tags are just graphics containers, and you must use scripts to draw graphics. By default, the rectangular area is 300 pixels wide and 150 pixels high, and setting the width height must be inside the canvas label and not add a unit px.

Most canvas drawing APIs are not defined on the <canvas> element itself, but rather on a "drawing environment" object obtained through the GetContext () method of the canvas.

Note: The width and height of the style are scaled to the canvas, and the contents of the canvas are scaled accordingly.

• Draw Path

The MoveTo (x, Y) method sets the starting point of the segment, the LineTo (x, Y) method sets the end point of the segment, and the stroke () method is used to color the transparent segment. The default is black. Beginpath () Reset path, Closepath () creates a path from the current point to the starting point

Now draw a rectangle with the path

<! DOCTYPE html>Canvas {border:1px solid black;        width:1000px; }    </style>varCVS = document.getElementById (' CVS ');//Get Canvas Labels    //Draw 2d graphics, to pass 2d as parameters    //Draw 3d graphics, to pass WEBGL as a parameter    varCTX = Cvs.getcontext (' 2d '); //in this case, a rectangular function is used to encapsulate    functionStrokerect (CTX, X, Y, W, h) {//Ctx.beginpath ();Ctx.moveto (x, y); Ctx.lineto (x+W, y); Ctx.lineto (x+ W, y +h); Ctx.lineto (x, y+h);          Ctx.lineto (x, y);    Ctx.stroke (); } strokerect (CTX,100,100,150,150);//draw a starting position in the canvas at (100,100), with a width height of 150px rectangles</script></body>
 
 

  
  
 
   
Some common methods and properties of canvas
 
  
 
 
To draw a rectangle:
Rect (X,Y,W,H)
FillRect (x,y,w,h) draws the filled rectangle default black itself does not render, need to use fill () or stroke ()
Strokerect (x,y,w,h) draws a rectangle with a border default black itself does not render, you need to use fill () or stroke ()
To set properties:
FillStyle: Fill Color (note order)
Strokestyle: Line Color
LineWidth: line width
LineJoin: Boundary style
LineCap: End Style

 
 

  
  
 
   
Canvas setting text
 
  
 
 
Working with CSS
Filltext (string, x, y) is used to draw text whose three parameters are the text content, the x-coordinate of the starting point, and the y-coordinate
Similar to this is the Stroketext method, which is used to add hollow words.
The Filltext method does not support text break, that is, all text appears in one line. So, if you want to generate multiple lines of text, you only have to call multiple Filltext methods.

 
 

  
  
 
   
Package for canvas simple animations
 
  
 
 
Do a demo without encapsulation
<! DOCTYPE html>Canvas {border:1px solid black; }    </style>varCVS = document.getElementById (' CVS ')); varCTX = Cvs.getcontext (' 2d '); Ctx.fillrect (50,50,50,50); varnum = 0; SetInterval (function() {num++; Ctx.clearrect (0,0,1000,500); Ctx.fillrect (Num,num,50,50); },25)    </script></body>
Encapsulate the rendering as a framework:
<! DOCTYPE html>Canvas {border:1px solid black; }    </style>varCVS = document.getElementById (' CVS ')); varCTX = Cvs.getcontext (' 2d '); //encapsulation of rectangular drawing functions    functionStrokerect (CTX, X, Y, W, h) {Ctx.beginpath ();        Ctx.moveto (x, y); Ctx.lineto (x+W, y); Ctx.lineto (x+ W, y +h); Ctx.lineto (x, y+h);        Ctx.lineto (x, y);    Ctx.stroke (); }    //constructor Function    functionRect (CTX, X, Y, W, h) { This. CTX =CTX;  This. x =x;  This. y =y;  This. W =W;  This. H =h; }    //How to add a constructor to a prototype objectRect.prototype.draw =function() {Strokerect ( This. CTX, This. x, This. Y, This. W, This. h);    }; varRect =NewRect (ctx,50,50,50,50); varDisplayobjects = [];    Displayobjects.push (rect); SetInterval (function() {Ctx.clearrect (0,0,1000,500);//clear the entire canvas every time the timer is executedRect.x = rect.x+1; Displayobjects.foreach (function(displayobject) {Displayobject.draw (); })    },25)</script></body>
Not to be continued!!!
What about the canvas of HTML5?