Shulou(Shulou.com)06/03 Report--

This article shows you how to draw the basic lines of Canvas in HTML5, which is concise and easy to understand, which will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

How to draw lines? It's similar to painting in real life:

1. Move the brush to move the brush to the beginning of the painting

two。 Determine the stop point of the first stroke

3. After planning, select the brush (including the thickness and color of the brush, etc.)

4. Determine the drawing

Because Canvas is state-based rendering (which is important and will be explained later), the first few steps are in determining the state, and the last step will be specific drawing.

1. Move the brush (moveTo ())

We obtained the brush context before, so take this as an example to give an example of the use of the modified method-context.moveTo (100100). This code means to move the brush to the point (100100) (in px). Remember, here is the upper-left corner of the canvas canvas as the origin of the Cartesian coordinate system, and the positive direction of the y-axis is downward, and the positive direction of the x-axis is right.

two。 Stroke stop point (lineTo ())

Similarly, context.lineTo (600600). This means to draw from the stop point of the previous stroke to (600600) here. But to be clear, the moveTo () ``lineTo () here is just a status, it's a plan, I'm going to paint, I haven't started yet, it's just a plan!

3. Select a brush

Here we just set the color and thickness of the brush for the time being.

Context.lineWidth = 5, which means to set the thickness of the brush (line) to 10px.

Context.strokeStyle = "# AA394C", which means to set the color of the brush (line) to rose.

Because Canvas is state-based rendering, we choose the thickness and color of the line as well as the thickness and color of the brush.

4. Determine the drawing

There are only two ways to make sure that you can draw, fill () and stroke (). Those who have some basic painting should know that the former refers to filling and the latter refers to strokes. Because we are only drawing lines, all we have to do is to stroke. Just call the code context.stroke ().

Draw a line

It's just a line! What a lot of nonsense! Then let's start painting.

JavaScript Code copies content to the clipboard

Starting from the lines, your browser doesn't support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.moveTo (100100); context.lineTo (600600); context.lineWidth = 5; context.strokeStyle = "# AA394C"; context.stroke ();}

Running result:

My friends have been asking me what kind of ghost is the bear in the lower right corner of the page. Oh, I forgot to explain before, that's my security watermark!

I also marked a page parsing diagram for your reference.

Here I removed the width and height from the original tag, but set the width and height properties of the canvas object in the JavaScript code.

Summary: there are only two ways to set the size of the canvas

1. Set in label

two。 Set the property of canvas in the JS code.

How is it? isn't it very cool? Next we need to pick up the pace and draw a graph composed of multiple lines. Do you feel like you're one step closer to the artist? Despite the fact that this is just a simple line, this painting is only a small step for us, but a big step for mankind!

Draw a broken line

We have successfully drawn a line segment above. So, what if I want to draw a broken line with two strokes or even many strokes?

Smart friends must have thought of it, it's not easy, just reuse lineTo (). Next, I will present myself and draw a beautiful broken line casually.

JavaScript Code copies content to the clipboard

Draw broken lines your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.moveTo (100100); context.lineTo (300300); context.lineTo (100500); context.lineWidth = 5; context.strokeStyle = "# AA394C" Context.stroke ();}

Running result:

Draw multiple broken lines

In the same way, what if we want to draw multiple broken lines of different styles? For example, we draw three broken lines here, which are red, blue and black. Smart friends must have thought of it, it's not easy, you just need to pan and change the brush color. The format of the code is the same, just copy it. The code is as follows.

JavaScript Code copies content to the clipboard

Draw broken lines your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.moveTo (100100); context.lineTo (300300); context.lineTo (100500); context.lineWidth = 5; context.strokeStyle = "red" Context.stroke (); context.moveTo (300100); context.lineTo (500300); context.lineTo (300500); context.lineWidth = 5; context.strokeStyle = "blue"; context.stroke (); context.moveTo (500100); context.lineTo (700300); context.lineTo (500500); context.lineWidth = 5 Context.strokeStyle = "black"; context.stroke ();}

Running result:

Huh? Isn't that weird? What about red, then blue, then black? Why is it all black? In fact, the reason for this is that I have always stressed that Canvas is state-based rendering.

What do you mean? In fact, every time this code uses stroke (), it will draw the previously set state again. The first time stroke (), draw a red broken line; the second time stroke (), the previous red broken line will be redrawn, but at this time the brush has been changed to blue, so the drawn broken lines are all blue. In other words, the strokeStyle attribute is overridden. Similarly, the third time you paint, the brush color is the last black, so three black broken lines are redrawn. So, the three broken lines seen here have actually been drawn three times and a total of six broken lines have been drawn.

So, I want to draw three broken lines, is there no way? Is this the end of the soul of the artist? Is it hopeless? No, there's a way.

Start drawing using beginPath ()

In order to keep the drawing method from drawing repeatedly, we can add beginPath () before each drawing, which represents the code after beginPath () where the next drawing starts. We add context.beginPath () before the three drawings.

JavaScript Code copies content to the clipboard

Draw broken lines your browser does not support Canvasgrams! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext ("2d"); context.beginPath (); context.moveTo (100100); context.lineTo (300300); context.lineTo (100500); context.lineWidth = 5 Context.strokeStyle = "red"; context.stroke (); context.beginPath (); context.moveTo (300100); context.lineTo (500300); context.lineTo (300500); context.lineWidth = 5; context.strokeStyle = "blue"; context.stroke (); context.beginPath (); context.moveTo (500100) Context.lineTo (700300); context.lineTo (500500); context.lineWidth = 5; context.strokeStyle = "black"; context.stroke ();}

As you can see, we got the expected results here. Because of the use of beginPath (), the drawing process here is only drawn three times, and only one broken line at a time, as we thought. BeginPath () is the starting point of the drawing setting state, after which the scope of the drawing state set by the code ends with the drawing methods stroke (), fill (), or closePath (), as discussed after closePath ().

So we must use beginPath () before we start to draw. For the sake of code integrity, it is recommended that you use closePath () after each drawing.

The above content is how to draw the basic lines of Canvas in HTML5. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.