Results the preview

Canvas drawing basic flow

The initial canvas

For the drawing of canvas, it is necessary to specify a canvas in HTML, namely ****, which can be regarded as creating a blank document in PS, and all subsequent operations will be presented on this document. The difference from PS is that Canvas itself has no layer feature, and when views of different dimensions need to be displayed, Need to be handed over to the HTML location relationship to solve.

On the Canvas tag, it is worth mentioning that width and height represent the width and height of the canvas, which are quite different from the width and height on the canvas style. In the browser, see the size of the graphics rendering, itself is a canvas. Style. The width/canvas. Style. The height, they decided to the size of the canvas the dom element relationship, Canvas. width and canvas.height determine the size relationship of the graphics inside the canvas. When these two aspect ratios are different, there is a visual distortion. That is, when canvas.style.height is doubled, the display will be stretched:

When the style width and height are not set, the canvas size in the browser is determined by the canvas size (in actual development, there is an exception. When mapBox is used, if only canvas canvas size is set for the label to draw a map, it will be displayed abnormally on the browser of ios mobile terminal and normal on PC).

Get context

A context is an environment in which you can retrieve related methods, variables. There is a context in the program, and there is also a context in the HTML media, such as the AudioContext. Only when you get the context can you carry out relevant method operations. The same is true for canvas, where all methods are obtained by the canvas context.

<canvas id="leftCanvas"></canvas>
const canvasL = document.getElementById("leftCanvas");
const cxtL = canvasL.getContext("2d");
Copy the code

Configure the line

Context attributes needed for this arc animation are:

  • LineCap line segment endpoint shape, this time set to round
  • Our lineWidth line width
  • StrokeStyle lines fill with color
  • ClearRect clears the contents of the canvas
  • BeginPath starts a new path on the canvas
  • Arc Arc drawing parameters
  • Stroke to draw

The Angle

Before calculating the Angle, let’s introduce the basic API arc for drawing arcs.

ctx.arc(x, y, radius, startAngle, endAngle [, anticlockwise]);
Copy the code

This function takes six mandatory arguments: center x, center y, radius, start Angle, end Angle, and direction (default is false, clockwise).

Back to the arc animation, the current animation has two segments, take the clockwise segment as an example.

  • X, Y: In canvas, the coordinate system takes the upper left corner as the origin by default. If you want to rotate the arc animation around the center point of the canvas, you can set the center point as the center point of the canvas, that is, half the length and width of the canvas. Assuming that the length and width of the canvas are both 100, the coordinates of the center point are (50, 50), and the circle is drawn in the middle of the canvas.
  • Radius: The radius is set slightly smaller than the canvas in order not to generate an Angle cut to the canvas.
  • StartAngle: The starting Angle is due north and the circle is 0 degrees horizontal on the X-axis, so rotate the starting point 90° counterclockwise, i.e. -1/2 * math.pi.
  • EndAngle: because the arc length is 30°, the endAngle is increased by 1/6 * math.pi from the beginning Angle.

The initial configuration of the clockwise arc is:

 cxtL.arc(WidthL / 2, HeightL / 2, WidthL / 2 - 5, -1 / 2 * Math.PI, 1 / 6 * Math.PI, false);
Copy the code

Open animation

window.requestAnimationFrame()

Use requestAnimationFrame to continuously redraw the arc of the Canvas, empty the canvas before redrawing each time, the animation direction is offset by 2°, i.e. 2/180 * math.pi, and the end of the animation is marked as the Angle at the end of the arc. Move to 3/2 * Math in PI, when meet the conditions, call window. CancelAnimationFrame (animationId) cancel the animation.

Screen adaptation

After entering THE HTML, dynamically obtain the viewport to set the canvas width and height. For example, if you want the canvas size to be 15% of the width of the window, you can pass

const clientWidth = document.documentElement.clientWidth; Const canvasWidth = math. floor(clientWidth * 0.15); const canvasL = document.getElementById("leftCanvas"); canvasL.setAttribute("width", canvasWidth + "px");Copy the code

This allows the canvas to adapt to different screen sizes.

The following is unorganized code, messy, for reference only.

Codepen. IO/jbleach/pen…