First, let’s quote the definition of canvas from MDN:

The <canvas> element is an HTML5 addition that can be used to draw graphics using JavaScript scripting. For example, drawing graphs, composing photos, creating animations, and even real-time video processing and rendering.

In other words, this is a canvas and a rich set of interfaces provided to us by the browser, which can be used to create various complex effects. The <canvas> element creates a fixed-size canvas that exposes one or more rendering contexts. It can be used to draw and manipulate what is displayed on the page. This is the coordinate system of canvas 2d. You can see that the upper left corner is the origin, the horizontal axis is the x-axis, and the vertical axis is the y-axis. All our canvas2d function implementations are in this coordinate system.

Basic Usage#

This article only briefly introduces how to draw rectangles, line segments, and arcs.

Rectangle#

Let’s understand the basic API through a simple example:

HTML:#

<canvas id="canvas" style="height:100%">
  当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>

JavaScript:#

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var WINDOW_WIDTH = window.screen.availWidth;
var WINDOW_HEIGHT = window.screen.availHeight;
ctx.clearRect(0, 0, WINDOW_WIDTH, WINDOW_HEIGHT);
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.fillRect(10, 10, 55, 50);
ctx.fillStyle = "rgba(0,0,200,0.5)";
ctx.fillRect(30, 30, 55, 50);

The page will display as follows:

First, get the canvas element and get its rendering context through getContext(‘2d’).

clearRect(x, y, width, height)#

Clears the specified area. If you need to do animation, you need to call this function to clear the content of the previous frame before each re-rendering.

beginPath()#

Starts a new path

fillStyle#

Used to set the color to fill

ctx.fillRect(10, 10, 55, 50);#

Draws a rectangle with a width of 55 and a height of 50, starting at x-axis equals 10 and y-axis equals 10.

strokeRect(x,y,width,height)#

The difference from fillRect is that strokeRect will draw a rectangle’s border, as follows:

Line Segment#

Draw a triangle

ctx.beginPath();
ctx.moveTo(75, 50);
ctx.lineTo(100, 75);
ctx.lineTo(100, 25);
ctx.closePath();
ctx.stroke();

moveTo(x,y)#

Defines a starting point, and drawing starts from this point

lineTo(x,y)#

Draws a straight line from the current position to the specified x and y position

closePath()#

Closes the current path, which can also be replaced by lineTo to the starting point

storke()#

Draws line segments based on existing paths, which means that if stroke() is not executed, nothing will be on the canvas.

Arc#

arc(x, y, radius, startAngle, endAngle, anticlockwise)#

This method has five parameters: x, y are the coordinates of the center of the circle where the arc is drawn. radius is the radius. The startAngle and endAngle parameters define the start and end angles in radians. These are all based on the x-axis. The parameter anticlockwise is a boolean value. When true, it is counterclockwise; otherwise, it is clockwise. Let’s look at a visual example:

ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true);
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false);
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true);
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true);
ctx.stroke();
ctx.clearRect(0, 0, 500, 500);
for (var i = 0; i < 4; i++) {
  for (var j = 0; j < 3; j++) {
    ctx.beginPath();
    var x = 20 + j * 40;
    var y = 20 + i * 40;
    var radisu = 20;
    var startAngle = 0;
    var endAngle = Math.PI + (Math.PI * j) / 2;
    var anticlockwise = i % 2 == 0 ? true : false;
    ctx.arc(x, y, radisu, startAngle, endAngle, anticlockwise);
    if (i > 1) {
      ctx.fill();
    } else {
      ctx.stroke();
    }
  }
}

Through this example, you can clearly see the difference between the fill and stroke functions. The former renders the border, and the latter fills the entire specified area. At the same time, you can distinguish the rendering mechanism when anticlockwise is true and false respectively. The former is counterclockwise, and the latter is clockwise.

Summary#

With just these three basic usages, you can create many beautiful animations. Here I made a simple moving ball and also did boundary determination.

Reference article: MDN-Canvas