This is the 28th day of my participation in the August Text Challenge.More challenges in August

preface

We often see websites with interactive background walls and captcha, which can be implemented through our front-end canvas Cavans. Let’s take a look at the front-end canvas.

Cavans profile

The Canvas API provides a way to draw graphics using JavaScript and HTML’s < Canvas > element. It can be used for animation, game graphics, data visualization, image editing, and real-time video processing.

The

tag has only two properties width and height. These are optional. When the width and height are not set, the Canvas initializes a width of 300 pixels and a height of 150 pixels. The ID is a convenient JS script location that each Dom element has.

<canvas id="tutorial" width="150" height="150"></canvas>
Copy the code

Js gets a reference to the HTML

element through the document.getelementByid () method. Next, get the element’s context with the getContext() method, and render the canvas.

Cavans graph drawing

After the context of the canvas element, we can draw complex graphics such as rectangles, triangles, lines, arcs and curves.

rectangular

  • FillRect (x, y, width, height) : Draws a filled rectangle

  • StrokeRect (x, y, width, height) : Draws the border of a rectangle

  • ClearRect (x, y, width, height) : Clears the specified rectangle area, making the clearing part completely transparent

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.fillRect(25.25.100.100);
    ctx.clearRect(45.45.60.60);
    ctx.strokeRect(50.50.50.50); }}Copy the code

  • rect(x, y, width, height): Draws a rectangle with the upper-left coordinates (x,y), width and height.

Rect draws a rectangle by adding a rectangular path to the current path. Let’s see how paths are used to draw a graph.

Use paths to draw graphs

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. A path, or even a subpath, is closed. Drawing graphs using paths requires some additional steps.

  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(): Creates a path. After the path is generated, the graph drawing command is pointed to the path to generate the path.
  • closePath(): After the path is closed, the graph drawing command points back to the context.
  • stroke(): Draws the outline of a graph by using lines.
  • fill(): Generates solid graphics by filling the content area of the path.
  • moveTo(x, y): Moves the stroke to the specified coordinates X and y.
  • lineTo(x, y): Draws a line from the current position to the specified x and y positions.

For example, draw a triangle:

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext) {
    var ctx = canvas.getContext('2d');

    ctx.beginPath();
    ctx.moveTo(75.50);
    ctx.lineTo(100.75);
    ctx.lineTo(100.25); ctx.fill(); }}Copy the code

The circular arc

To draw arcs or circles, we use the Arc () method or arcTo() method.

  • arc(x, y, radius, startAngle, endAngle, anticlockwise): 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.
function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    for(var i = 0; i < 4; i++){
      for(var j = 0; j < 3; j++){
        ctx.beginPath();
        var x = 25 + j * 50; // the x coordinate value
        var y = 25 + i * 50; // the y coordinate
        var radius = 20; // Arc radius
        var startAngle = 0; / / start point
        var endAngle = Math.PI + (Math.PI * j) / 2; / / end points
        var anticlockwise = i % 2= =0 ? false : true; // Clockwise or counterclockwise

        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

        if (i>1){
          ctx.fill();
        } else {
          ctx.stroke();
        }
      }
    }
  }
}
Copy the code