First of all, the author will be sharing 3D based content, WebGL, starting today. At the same time, we also hope that interested students can discuss together. Let’s cut to the chase and get down to business. (This article is a little longer, please take a break from reading.)

1. 3D Basics — Learning about Canvas

When it comes to front-end 3D development, canvas is inevitable. We also started with this content and gradually moved into the 3D world.

1.1 introduction of canvas

I believe that many friends are familiar with this label, in their career, more or less will be exposed to a little.

But!! But we’re going to talk about it briefly.

  • canvasIs a new tag provided by HTML5.
  • The main function is to draw graphics.
  • Draw the action throughJavaScriptTo complete.
  • There are multiple methods for developers to call. Can complete most of the development problems encountered in the work.

1.2 Main functions of Canvas

  • For visualization. Make visual charts and so on.
  • Make graphic editor and other tools.
  • Multiple media content and special effects can be embedded. And can withwebCarry out very good compatibility.

1.3 Simple comparison between Canvas and SVG

  • canvasIs pixel-based graphics, is a bitmap;svgIs a scalable vector graph
  • canvasHTML5 tags;svgIs an XML tag
  • canvasEvent handlers are not supported,svgSupport event handlers
  • The unsupport here meanscanvasElements drawn inside the tag are not supported, howevercanvasThe tag itself is supported as it is oneDOMTags to support events such as the mouse we often use.
  • whilesvgIt was supposed to passdomDraws in the form of. sosvgGraphics can be drawn to support event handling.

1.4 Introduction to usage

Your browser does not support Canvas, please upgrade or choose another browser </canvas>Copy the code

As with other tags, we can embed a canvas content in a page using the
method. And specify an ID CTX. We’ll use this value for the rest of the article.

The contents of the TAB will only be displayed on browsers that do not support Canvas.

Here we use inline styles to declare the width and height of the canvas. You can also use javascript to do this dynamically, but be aware of canvas distortion.

2. Introduction to the use of canvas — the use of 2D scenes.

2.1 Obtaining the drawing context

First we get the canvas DOM element through the document.getelementById () method.

const ctx = document.getElementById('ctx');
Copy the code

We can then retrieve the drawing context from the retrieved CTX.

const c = ctx.getContext('2d'); // Specify the view environment as 2D.Copy the code

Here we get the 2d view environment. Later, when sharing WebGL, we will talk about how to get a 3D view environment.

Note: CTX is used here to get the drawing context, not document.

2.2 Canvas Direction

Canvas can be divided into x and Y directions, namely vertical and horizontal directions. As shown below:

2.3 Common drawing methods

After obtaining the drawing context, we need to obtain the drawing image according to our preferences. The next content is to tell us how to draw the graph through the method provided by Canvas.

2.2.1 line drawing

The first is how to draw a line segment in a canvas. Next we will use the following methods:

  • StrokeStyle: Sets the line color

  • MoveTo (x, y) : starting point

  • LineTo (x, y) : endpoint

  • The stroke () : the connection

  • LineWidth: controls the lineWidth

  • LingCap: display at both ends of the control line segment

    C. strokestyle = ‘red’; // Set the color of the line to red c. moveto (50, 50); C. linto (100, 100); // Draw c.stroke() at 100, 100; // Draw a line between the two points

Unsurprisingly, you’ll see a red line on the page. Here you can think of these methods and properties as a pen. Stroke oil is red (strokeStyle), tap two dots on the paper (50,50 and 100,100) and then connect the two dots (stroke())

Now let’s see how we can change the thickness of the line. —- lineWidth property.

c.lineWidth = 10;
Copy the code

Now that you’ve changed the thickness of the line, look at how to modify the display at both ends of the line segment. This uses the —- lingCap property, which has three values: butt: default, round: show rounded corners, and square: show rectangles. Detailed display as shown in the figure below:

2.2.2 draw graphics

Using the basic method of line segments, we can draw line segments on the canvas. Now let’s see how to draw a graph. Graphics are drawn by wire segments, so we can use line segments to assemble graphics. LineTo is used here, because it can be drawn continuously. Here are a few examples:

// Draw a red triangle c.strokestyle = 'red'; c.moveTo(150, 150); c.lineTo(350, 150); c.lineTo(250, 50); c.lineTo(150, 150); C.stroke ()// Draw a green rectangle c.strokestyle = 'green'; c.moveTo(350, 350); c.lineTo(550, 350); c.lineTo(550, 250); c.lineTo(350, 250); c.lineTo(350, 350); c.stroke()Copy the code

If you run the above two examples, you can see the problem that we are drawing with borders, not solid shapes. Now let’s talk about how to make a hollow shape solid.

2.2.3 Drawing solid graphics

Here are a few methods and properties we need to talk about

  • strokeStyle
  • stroke()
  • fillStyle
  • fill()

StrokeStyle and stroke() are two methods we’ve used before. Use these two methods when drawing lines and hollow shapes.

FillStyle, fill() these two methods are used to draw solid graphics. Such as:

// Draw a solid red triangle c.fillstyle = 'red'; c.moveTo(150, 150); c.lineTo(350, 150); c.lineTo(250, 50); c.lineTo(150, 150); C. ill()// Draw a solid green rectangle c. Ill style = 'green'; c.moveTo(350, 350); c.lineTo(550, 350); c.lineTo(550, 250); c.lineTo(350, 250); c.lineTo(350, 350); c.fill()Copy the code

So we have two solid shapes.

After drawing the graph, we can change the shape of the graph corner by using the — lineJoin method. It has three values — miter: default sharp Angle, bevel: straight Angle, and round: rounded Angle.

In addition, canvas also provides two methods for drawing solid and hollow rectangles: fillRect(x, y,w,h) and strokeRect(x,y,w,h).

Where x and y represent the coordinates of the upper left corner of the rectangle. W for width and H for height.

3. The scope

I don’t know if you drew section 2.2.3 at the same time. If so, you can spot a problem that the solid triangle and solid decision both show the final rectangle in green. The red color for the triangle doesn’t work.

That’s the scope problem, two figures in the same scope. So only the last color is in effect. How to avoid this problem?

The following two methods are needed:

  • BeginPath (): start scope
  • ClosePath (): ends the scope

Now let’s modify the example in 2.2.3.

// Draw a solid red triangle c.beguinpath (); c.fillStyle = 'red'; c.moveTo(150, 150); c.lineTo(350, 150); c.lineTo(250, 50); c.lineTo(150, 150); C.ill () c.closepath ()// Draw a solid green rectangle c.beginpath (); c.fillStyle = 'green'; c.moveTo(150, 250); c.lineTo(150, 350); c.lineTo(350, 350); c.lineTo(350, 250); c.fill()c.closePath()Copy the code

Here, we put the triangle and rectangle in different scopes, and look at the drawing again. Now the triangle is red and the rectangle is green