introduce

WebKit was first introduced by Apple as the Dashboard for Mac OS X. Canvas is a new element of HTML5 that can be used to draw graphics using scripts in JavaScript. For example, it can be used to draw graphics, make photos, create animations, play interactive games, and even do real-time video processing or rendering.

Basic usage

The rendering context

The Canvas element creates a fixed-size canvas that exposes one or more render contexts that can be used to draw and process the content to be displayed.

Let canvas = document.querySelector('#canvas') let CTX = canvas.getContext('2d')Copy the code

Check support

If (canvas.getContext) {// support} else {// not support}Copy the code

Draw the shape

rectangular

The path

The basic element of the graph is the path. A path is a collection of points of different shapes connected by line segments or curves of different colors and widths.

1. First, you need to create the path starting point.
2. You then use the draw command to draw the path.
3. And then you close the path.
4. Once the path is generated, you can render the shape by stroke or filling the path area.
   
   beginPath()
   
   Create a new path. After the path is generated, the graph drawing command is pointed to the path to create the path.
   
   closePath()
   
   After the path is closed, the graph drawing command points back to the context.
   
   The stroke () – outline
   
   Use lines to draw the outline of a graph.
   
   The fill () – as a whole
   
   Generates solid graphics by filling the content area of the path.
   
   PS: Fill closes automatically and stroke does not.
   
   MoveTo (X, Y) — Moves strokes
   
   Moves the stroke to the specified coordinates X and y.
   
   When canvas initializes or beginPath() is called, you usually use the moveTo() function to set the starting point. We can also use moveTo() to draw discontinuous paths
   
   LineTo (x, y) — a line
   
   Draws a line from the current position to the specified x and y positions.
   
   Arc (x, Y, RADIUS, startAngle, endAngle, anticlockwise) — An arc
   
   Draw a radius arc (circle) with (x,y) as the center, starting with startAngle and ending with endAngle, in the direction given by anticlockwise (clockwise by default).
   
   arcTo(x1, y1, x2, y2, radius)
   
   Draw an arc according to the given control point and radius, and then connect the two control points in a straight line.
   
   Radians =(math.pi /180)*degrees
   
   QuadraticCurveTo (CP1x, CP1Y, X, Y) — Quadratic Bezier curves
   
   Draw a quadratic Bessel curve, cp1x,cp1y as a control point, x,y as the end point.
   
   BezierCurveTo (CP1x, CP1Y, CP2x, CP2Y, x, Y) — Cubic Bezier curves
   
   Draw Bessel curves three times, with cp1x and CP1y as control points 1, cp2x and cp2y as control points 2, and x and y as end points.
   
   PS: Bezier curves always start with the starting path. In fact, the quadratic Bezier curve is controlled by 3 points, and the NTH Bezier curve is controlled by N +1 points.
   
   Wiki-bezier curve
   
   Extra method to draw a rectangle
   
   rect(x, y, width, height)
   
   Draw a rectangle with upper-left coordinates (x,y), width and height.
   

   Path2D object

   To simplify code and improve performance, Path2D objects can now be used in newer browsers to cache or record drawing commands so you can quickly review the path.
   
   Path2D()
   
   Path2D() returns a newly initialized Path2D object (possibly a path as a variable — create a copy of it, or a string containing SVG Path data as a variable).
   
   Path2D.addPath(path [, transform])​
   
   Adds a path to the current path (possibly adding a transformation matrix).

   Var p = new Path2D("M10 10 h 80 v 80 h-80 Z");Copy the code

Use styles and colors

Color Colors

FillStyle = color Sets the fill color of the graphic. StrokeStyle = color Sets the color of the shape outline. PS: Orange, # FFA500, RGBA (255, 165, 0, 1), HSL (360, 50%, 50%), HSLA (360, 50%, 50%, 1)

The Transparency of Transparency

Linear Line styles

Lines can be styled through a series of properties. LineWidth = value sets the lineWidth. Line width is the sum of the distances from the center to both sides of a given path. In other words, draw half the line width on each side of the path. LineCap = type Sets the end of the line style. Butt, round and square. The default is butt. LineJoin = type Sets the style of the line and the adjacent line. Round, Bevel and Miter. The default is miter. MiterLimit = value Specifies the maximum length at which two lines intersect. The so-called intersection length (miter length) is the length from the inner corner to the outer corner of the line where it meets. GetLineDash () returns an array containing the current dotted line style and a non-negative even length. [A, b] A is a solid line, b is blank, and so on. SetLineDash (segments) sets the current dashed line style. LineDashOffset = value Sets the starting offset for the dashed line style.

Gradient Gradients (new gradient object)

Linear gradient

The createLinearGradient method takes four parameters, representing the start (x1,y1) and end (x2,y2) of the gradient.

Radial gradient

Patterns and Patterns

CreatePattern (image, type) This method takes two arguments. Image can be a reference to an Image object, or another Canvas object. Type must be one of the following string values: repeat, repeat-x, repeat-y, and no-repeat. You need to make sure the image object is onloaded, otherwise the image might not look right.

Shadow we

Canvas filling rule

When we use fill (or clip and isPointinPath) you can select a fill rule that determines whether a certain place is filled based on whether it is inside or outside the path. This is useful when you intersect your own path or when paths are nested. Nonzero: default value evenodd

Draw text

Styled text

Font = value The style we currently use to draw text. This string uses the same syntax as the CSS font property. The default font is 10px sans-serif. TextAlign = Value Text alignment option. Optional values include: start, end, left, right, or center. The default value is start. TextBaseline = Value Baseline alignment option. Optional values include: top, Hanging, middle, alphabetic, ideographic, and bottom. The default value is alphabetic. Direction = value Specifies the text direction. Possible values include: LTR, RTL, inherit. The default value is inherit.

Advanced text measurement

Using images

One of the more interesting features of Canvas is the ability to manipulate images. Can be used for dynamic image composition or as graphical backgrounds, game interfaces (Sprites), etc. Introducing an image to canvas requires the following two basic steps:

1. Get a reference to the HTMLImageElement object or another Canvas element as the source. You can also use the image by providing a URL (see example)
2. Draw the image onto the canvas using the drawImage() function
   

   Get the image you need to draw

   HTMLImageElement
   
   These images are constructed by the Image() function, or whateverThe element
   
   HTMLVideoElement
   
   Using an HTML element as your image source, you can grab the current frame from the video as an image
   
   HTMLCanvasElement
   
   You can use another element as your image source.
   
   ImageBitmap
   
   This is a high-performance bitmap that can be drawn with low latency, and it can be generated from all of the above sources and several others.
   
   PS: These sources are uniformly referenced by the CanvasImageSource type.

3. The images document using the same page. Images collection document. The getElementsByTagName () method of the document. The getElementById () to obtain the images
4. With the crossOrigin attribute on the HTMLImageElement, you can request images from other domains to be loaded.
5. Create an image from zero (onload is required to ensure that the image is loaded)
   
   var img = new Image(); // Create a <img> element img. SRC = 'myimage.png '; // Set the image source address
6. Embed image via data: URL
   
   img.src = 'data:image/gif; base64,... '
7. Using video frames
   
   return document.getElementById('myvideo');
   

   Draw pictures

   drawImage(image, x, y)
   
   Where image is the image or canvas object, x and y are its starting coordinates in the target canvas.

   Zoom Scaling

   drawImage(image, x, y, width, height)
   
   This method has two additional arguments: width and height, which control how much to scale when drawing to the canvas

   Slice Slicing

   drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
   
   The first argument is the same as the others, and is a reference to either an image or another canvas. The other 8 parameters are best referred to the diagram on the right. The first 4 parameters define the slice position and size of the image source, and the last 4 parameters define the target display position and size of the slice.

   Controlling image scaling behavior

   Gecko 1.9.2 introduced the mozImageSmoothingEnabled property, which does not scale smoothly when the value is false. The default is true.
   
   cx.mozImageSmoothingEnabled = false;

   Deformation Transformations

   Saving and Restoring State Saving and Restoring State

   save()restore()
   
   The save and restore methods are used to save and restore the canvas state without arguments. The Canvas state is a snapshot of all the styles and distortions applied to the current screen.
   
   PS: Canvas state is stored in the stack. Whenever save() is called, the current state is pushed to the stack for saving.

   Painting states include:

   Deformation of the current application (i.e. move, rotate, and scale, see below)
   
   strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, ShadowBlur, shadowColor, globalCompositeOperation values
   
   Current Clipping Path

   Mobile Translating

   Let’s start with the Translate method, which moves the canvas and its origin to a different location.
   
   translate(x, y)
   
   The Translate method takes two arguments. X is the left/right offset and y is the up/down offset, as shown on the right.
   
   It is a good practice to preserve the state before doing the transformation.