Introduction to the

Canvas is a new addition to HTML5, an HTML element in which you can draw images using a script (usually JavaScript). It can be used to make

Photo collections or simple (and not so simple) animations, or even real-time video processing and rendering.

Canvas is a drawable area defined by HTML code with height and width attributes. JavaScript code can access this area, similar to other generics

2d API, through a complete set of drawing functions to dynamically generate graphics.

Mozilla applications have supported Canvas since Gecko 1.8 (Firefox 1.5) and Internet Explorer since IE9. Chrome and Opera 9+ are also supported.

Basic use of Canvas

1. Canvas tag usage

<canvas id="target" width="300px" height="150px"> Canvas tag is not supported. </canvas>Copy the code

2. Canvas method check

var canvas = document.getElement('target')
if (canvas.getContext) {
  var ctx = canvas.getContent('2d')}else {
  console.log('This browser version is too old, please replace it')}Copy the code

3. Canvas draws graphics

The canvas API

FillRect (x, y, width, height) draws the filled rectangle. StrokeRect (x, y, width, height) draws the filled rectangle. ClearRect (x, y, width, Fill () fills the current drawing (path) Stroke () draws the defined path beginPath() starts (resets) the current path moveTo(x,) Y) Moves the stroke to the specified coordinate (x,y) lineTo(x, Y) Draws a straight line from the current position to the specified coordinates (x,y) Clip () cuts an area of arbitrary shape and size from the original canvas quadraticCurveTo() Creates a quadratic Bezier curve bezierCurveTo() creates a cubic Bezier curve arc(x,y,) ArcTo (x1, y1, x2, y2, radius) draw an arc according to a given point, IsPointInPath (x, y) checks whether the specified point is in the current pathtrue. FillStyle Settings or returns the color used for fill painting, gradient or mode strokeStyle Settings or returns the color used for stroke, gradient or mode shadowColor Settings or returns the color shadowBlur Settings or returns the blur level used for shadow ShadowOffsetX sets or returns the horizontal distance between shadow and shape shadowOffsetY sets or returns the vertical distance between shadow and shape lineCap sets or returns the end point style of the line (Butt, Round, square) lineJoin Sets or returns when two lines meet, LineWidth sets or returns the current lineWidth miterLimit sets or returns the maximum miter length createLinearGradient(x0, y0, x1, CreatePattern (Image/Canvas/Video, repeat) draws the specified element createRadialGradient in the specified direction (x0, y0, r0, x1, y1, R1) create radial gradient addColorStop(stop, Font sets or returns the current font properties of the text content (as CSS font does) textAlign sets or returns the current alignment of the text content textBaseline sets or returns the current textBaseline used when drawing text FillText (text, x, y) Draws the "filled" text on the canvas. Y) Draws text on the canvas (no fill) measureText(text) Returns an object containing the specified text width (attribute width gets the width) drawImage(image/canvas, x, Y), image (image/canvas, x, y, width, height), image (image/canvas, sx, sy, sWidth, sHeight, dx, dy, dWidth, CreateImageData (width, height), createImageData(imageData) draw the imageData object getImageData(x, y, Width, height) returns an ImageData object that copies pixel data for the specified rectangle on the canvas. PutImageData (ImageData, x, y), putImageData(ImageData, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) put the ImageData back on the canvas. Width returns the width of the ImageData object. Height returns the height of the ImageData object. Data returns an object, The ImageData globalAlpha setting that contains the specified ImageData object or returns the drawing's current alpha or transparency globalCompositeOperation setting or returns how the new image is drawn to an existing image. Rotate (Angle) selects the current drawing in radians. Rotate (Angle) selects the current drawing in radians. Transform (M11, M12, M21, M22, dx, dy) replaces the current transformation matrix of the drawingsetTransform() resets the current transformation to the cell matrix, and then runs Transform() save() to save the state of the current environment. Restore () restores the path state and property getContext('2d') get the 2D object toDataURL() convert the Canvas into a picture and return the addressCopy the code