Canvas Common API

1. Give the long width (without unit) in the canvas label: <canvas width= "height=" ></canvas>

or set the length width in js: canvas.width = 600; Canvas.height = 600;

Note: Canvas is an inline block element, and the width and height pixel values set with CSS are the canvas's width and height in the page, while the JS setting or directly given in the label is the canvas's resolution, which is essentially different.
The use of a canvas element is not the same as a normal HTML element, it has a default size of 300*150, setting the width in CSS can only change the canvas's display width, and does not change the size of the canvas when drawing, so to set the canvas to draw the size, Must be written on the element label or set with JS.

2. When the browser is compatible, the contents of the canvas label will not be displayed;

<canvas width= "height=" > your browser does not support canvas tags </canvas>

3. var canvas = document.getElementById ("Canvas"); Get Canvas Labels
var context = Canvas.getcontext ("2d"); Get a 2d context environment

Context.beginpath ();//Can start drawing

Context.moveto (100,100); The brush moves to (100,100);
Context.lineto (150,200); Create a path from (100,100) to (150,200)
Context.fillstyle = "#ccc"; Fill Color is #ccc
Context.strokestyle = "#fff"; to stroke
Context.linewidth = 5;
Context.fill ();//Fill in
Context.stroke ();//Stroke

Context.closepath ();//close current path (based on status)

About Closepath (): When the current path is not a closed path, using Closepath automatically connects the end of the current path

Context.fillrect (X,Y,W,H);
Context.clearrect (50, 30, 110, 35); Clear the content on the canvas

(50,30) is the rectangular starting point, and 110.35 is the rectangle length width

To draw multiple non-closed path graphics, use Beginpath each time you draw a new path
4. Drawing arcs
Context.arc (x,y,r,startingangle,endingangle,anticlockwise = false);
Parameters are: center coordinate, radius, start angle, end angle, clock direction (false to clockwise, true counterclockwise)
Three o'clock direction 0pi, six o'clock to 0.5pi, nine o'clock to 1.0pi,12 O/1.5pi
For example: Context.arc (300,300,100,0,math.pi*1.5,false);

5. Draw a Rectangle

Context.fillrect (X,Y,W,H);
Context.strokerect (50, 30, 110, 35)
Context.clearrect (50, 30, 110, 35); Clear the content on the canvas

6. Draw dashed Lines

Context.setlinedash ([A, b]);//a is the length of the dashed line segment and the length of the dashed segment

7. Get the position of the canvas element relative to the browser window

The Element.getboundingclientrect () method returns the size of the element and its position relative to the viewport

8. Drawing pictures

Cvs.drawimage (Image.x,y,width,height);
Context.drawimage (Img,sx,sy,swidth,sheight,x,y,width,height);

An image can be an element or an image object, but not a path
The image passed to the DrawImage () method must be either an image object or a Canvas element

Canvas Common API