What is a canvas

Canvas is the 2D drawing API for HTML, and most browsers support it. Simply put, the browser provides you with a rectangular area on the screen in which you can draw pictures. This includes drawing lines, shapes, images, text, etc.

Create a canvas

<! DOCTYPEhtml>
<html lang="en">
  <body>
    <canvas width="500" height="500" id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      c.fillStyle = "black";
      c.fillRect(50.50.400.300);
    </script>
  </body>
</html>
Copy the code

Contrast the rest of the drawing on the page

  • SVG: SVG is for drawing scalable vector graphics. Each shape has an object to which you can attach event handlers. The zooming in and out shapes stay smooth. A canvas is a pixelated image.

  • CSS: CSS implements graphics by styling DOM elements. Since things drawn on Canvas don’t have DOM objects, you can’t style them with CSS. CSS only affects the rectangle area of the Canvas itself, so you can set the border and background color.

  • DOM animation: Use the DOM or document object model to draw graphics on the screen. DOM animations that move objects using CSS or JavaScript are smoother in some cases than animations using Canvas, but this depends on your browser implementation.

When to use a canvas

  1. SVG can be used directly when you only need to render existing shapes on the screen.
  2. When most of the animations on the page have static prototype DOM, or when you want to use 3D transformations, you can animate CSS or DOM directly.
  3. For displaying charts, graphics, motion pictures, and video games, Canvas can be used directly.

The sample

drawing

<! DOCTYPEhtml>
<html lang="en">
  <body>
    <canvas width="800" height="600" id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      c.fillStyle = "rgb(0,0,0)";
      c.beginPath();
      c.moveTo(300.20);
      c.lineTo(100.50);
      c.lineTo(150.80);
      c.closePath();
      c.fill();
      c.strokeStyle = "RGB (0128, 0)";
      c.lineWidth = 5;
      c.stroke();
    </script>
  </body>
</html>
Copy the code

  1. var c = canvas.getContext("2d")Start by creating the canvas context.
  2. C.f illStyle = "RGB (0, 0)"Set the fill color. The fill color and stroke color Settings do not change automatically. To change subsequent drawing colors, you need to reset them. The format can be any valid CSS color representation, such as"# 000000", the name orrgb()Function.
  3. .beginPath()Indicates to start a path or reset the current path.
  4. .moveTo(300, 20)Moves the position of the drawing point.
  5. .lineTo(100, 50)Add a new point, and then create a line from that point to the last specified point on the canvas (this method does not create a line). You can think of it as drawing a connecting line segment from the last point to this point.
  6. .closePath()Sets the path from the current point to the start point.
  7. .fill()Fills the current image (path). Fill the image background with the defined fill color.
  8. C.s. trokeStyle = "RGB (0128, 0)"Set the stroke color. It is simply understood as the color of the pen when drawing.
  9. c.lineWidth = 5Set the line width.
  10. .stroke()Start drawing the graphics you set earlier on the canvas.

The path

The canvas supports only rectangular shapes directly. To draw any other shapes, you must draw them yourself using paths.

<! DOCTYPEhtml>
<html lang="en">
  <body>
    <canvas width="800" height="600" id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      c.fillStyle = "red";
      c.beginPath();
      c.moveTo(10.30);
      c.bezierCurveTo(50.90.150, -30.170.30);
      c.lineTo(200.90);
      c.lineTo(10.90);
      c.closePath();
      c.fill();
      c.lineWidth = 4;
      c.strokeStyle = "Black";
      c.stroke();
    </script>
  </body>
</html>
Copy the code

  1. .bezierCurveTo(50, 90, 150, -30, 170, 30)Draw a cubic Bezier curve. A cubic Bezier curve requires three points. The first two points are the control points used in the cubic Bessel calculation, and the third point is the end point of the curve.

The text

A canvas can also draw text. The font property is equivalent to the CSS font property.

<! DOCTYPEhtml>
<html lang="en">
  <body>
    <canvas width="800" height="600" id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      var grad = c.createLinearGradient(0.0.300.0);
      grad.addColorStop(0."white");
      grad.addColorStop(0.5."red");
      grad.addColorStop(1."black");
      c.fillStyle = grad;
      c.font = "96px Arial";
      c.fillText("Add text".20.150);
    </script>
  </body>
</html>
Copy the code

  1. createLinearGradient(0, 0, 300, 0)Create a linear gradient object. Used to set gradient background color.
  2. addColorStop(0, "white")provisionsgradientThe color and position of the object. You can set more than one to show gradients in different positions.
  3. fontSet the font style. withCSS fontAttribute is the same