canvas knowledge: const canvas = document.getElementById ( 'ID'); // Get the canvas element
const ctx = canvas.getContext ( '2d'); // need to build graphical environment, is simply painting canvas
Then all the canvas methods are based on ctx canvas,
0. essentially the general procedure:
= ctx.strokeStyle ''; // Stroke style default black
ctx.lineWidth = ''; // stroke width
ctx.stroke (); // strokes, that is, draw a line displayed
ctx.beginPath (); // If you think of a painting, you need to take up the pen and start again
ctx.closePath (); // last point is connected to a first point up, into a polygon, a straight line pattern becomes
ctx.fillStyle = ''; // fill style pattern
ctx.fill (); // filled, will draw the graphic display on the canvas out; Note: the rectangle is filled ctx.fillRect (x, y, width, height)
ctx.clearRect (X, Y, width, height); // clear the contents of the canvas
1. draw a straight line: ctx.moveTo (x, y); // starting point
ctx.lineTo (x, y); // brush stop position, the back may then ctx.lineTo (x, y)
2. Circle: ctx.arc (cx, cy, r, 0,2 * Math.PI, true); // cx, cy center position, r is the radius, and 0 is 2 * Math.PI round starting and the end of the arc, true picture clockwise
If it is not the end of the arc of 360 degrees, you can draw an arc
3. Draw a rectangle: ctx.strokeRect (x, y, width, height); Videos rectangle need not ctx.stroke (), because the method name contains a Stroke;
4. Shape change: the role of superimposed, shaped origin origin saved before;
ctx.translate (x, y); // translation, shifts the coordinate origin (0, 0)
ctx.rotate (); // rotation
ctx.sale (x, y); // Scale
ctx.save () and ctx.restore () pairs; ctx.save () saves the current environment, ctx.restore () restores the current environment
6.canvas text
Filling text ctx.fillText ( 'text', x, y); // x, y coordinates are placed in the text
Text stroke ctx.strokeText ( 'text', x, y);
ctx.font = ''; // font style,
ctx.textAlign = 'center / left / right'; // horizontal alignment
ctx.textBaseline = 'top / middle / bottom'; // vertical alignment
const width = ctx.measureText (text variable) .width; // get the text width
7. Cut graphics, images must be loaded after completion, in order to cut, it must be placed in the image onload instantiated in ctx.drawImage (img, startX, startY, endX, endY, x, y, width, height)
8. Cut the overlapping portion; ctx.clip (); only shows the overlapping portion
9.canvas shadow, after all, there will be a shadow set on the back, but can be solved with ctx.save () and ctx.restore ()
ctx.shadowOffsetX = ''; // x-axis offset; ctx.shadowOffsetY = ''; // y axis offset
ctx.shadowColor = ''; ctx.shadowBlur = ''; // edge blur from
10. Animation, kept by the timer is cleared contents of the canvas, ctx.clearRect (x, y, width, height),
Then stop rendering, animation effects can be achieved
11. The off-screen; then create a new canvas, cut to complex graphics do not need to repeat this drawing on canvas,
Then through ctx.drawImage () method, and the canvas graphic on the first cut on a canvas
Note: Remember to set off canvas screen to hide