Canvas draws basic geometry

Canvas element and 2D context

  • Canvas width and height: The width and height attributes on the Canvas element. 
    <canvas width="512" height="512"></canvas>
Copy the code
  • Style width height: The CSS style property of the Canvas element. 
    canvas {
  width: 256px;
  height: 256px;
}
Copy the code
  • Canvas width and height default, equal to style width and height.
  • The width and height of the canvas determine the coordinate range of the visible area.

    Canvas separates the width and height of the Canvas from the width and height of the style: it is easier to adapt to different display devices.

Second, Canvas coordinate system

A browser window-like coordinate system: by default, the upper-left corner is the origin of the coordinates, X-axis horizontally to the right, Y-axis vertically down.

Rotation or 3d corresponds to left-handed system.

3. Canvas draws geometric graphics

  1. To obtainCanvascontext 
    // Get the Canvas element from the DOM API
const canvas = document.querySelector('canvas');
// Get the Canvas context using the getContext method
const context = canvas.getContext('2d');
Copy the code
  2. withCanvasContext drawing graph
    1. state-setAPITo set or change the current drawing state. Such as: color, line width, coordinate transformation and so on.
    2. Draw the instructionAPI, used to draw geometric shapes of different shapes. 
      // Draw a 100*100 square in the center of the Canvas
const rectSize = [100.100];
context.fillStyle = 'red';
context.beginPath();
context.rect((canvas.width - rectSize[0) /2, canvas.height - rectSize[1] /2.100.100);
context.fill();
Copy the code

The method of drawing graphics to the center of a canvas

  1. Change the coordinates of the vertices of the graph to be drawn.

    Multi-vertex graph needs to calculate the position of each vertex before drawing, which is very troublesome.

  2. throughtranslateTranslation.

    Just get the offset from the center point to the upper left corner. However, it is necessary to restore the state of the canvas before drawing any subsequent graphics.

Method to restore the state of the canvas

  1. Reverse translation recovery method 
    / / translation
context.translate(-rectSize[0] /2, -rectSize[1] /2);

/ / recovery
context.translate(rectSize[0] /2, rectSize[1] /2);
Copy the code
  2. restoreMethod of instruction 
    // Temporary state
context.save();
/ / translation
context.translate(-rectSize[0] /2, -rectSize[1] /2);

// ...

/ / recovery
context.restore();
Copy the code

5 steps to draw a Canvas rectangle

  1. throughgetContextTo obtainCanvasObject;
  2. throughfillStyle.translateEtc. Set drawing state;
  3. callbeginPathCommand to start drawing a rectangle;
  4. Call drawing instruction (Canvas MDN official document);

    Rect draws rectangles; lineTo draws straight lines; polygon arc draws arcs, circles, ellipses, and fan quadraticCurveTo; bezierCurveTo draws Bezier curves

  5. callfillCommand to actually output the drawn content to the canvas.

Iv. Canvas draws hierarchy diagram

The mapping between Hierarchy Data and drawing instructions is established, that is, converting JSON Data into graphic information.

  1. Process the data

    Data conversion tool library D3-Hierarchy

  2. Through the data
  3. Drawing graphics

Use the clearRect command to erase the previous graph and draw the new graph.

V. Advantages and disadvantages of Canvas

  1. Advantages: Easy to operate, efficient rendering capability.

    Canvas is a very simple and easy to use graphics system, which can easily draw a variety of complex geometric graphics. Canvas is more towards the rendering layer and can provide the underlying graphics rendering API to complete rendering with high performance.

  2. Disadvantages: Internal graphic elements are not easy to control.

    Canvas is an independent Canvas element in HTML, and the graphics drawn are only pixels in Canvas for the browser, so it is difficult to directly extract the graphics for operation.