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

This article mainly introduces how to draw pictures in html5 Canvas, which is very detailed and has certain reference value. Friends who are interested must finish reading it.

Although everyone calls Canvas the new tag of html5, it looks as if Canvas belongs to the new knowledge of the html language, but in fact Canvas drawing is done through javascript. So, if you want to learn Canvas drawing, you must have a Javascript foundation.

In addition, there are always some terms and knowledge about drawing, so if you have experience in drawing or art, it will be easier to learn Canvas.

Canvas, which means canvas. And the Canvas in Html5 is very similar to the canvas in real life. Therefore, to think of him as a real canvas can speed up understanding.

Canvas

To paint with canvas, first of all, you need to have a canvas. If you don't have a canvas in your bookshelf, you can buy a roll and put it in. Of course, we don't need to pay for it on the web page, we can just write a canvas, like:

The code is as follows:

Your browser does not support canvas

The text in the tag is for browsers that do not support canvas, and those that support it will never be seen.

It's worth mentioning that this canvas has two native properties, width and height. At the same time, because he is also a html element, he can also use css to define width and height, but be careful: his own width and height is not the same as that defined by css!

We use JS to change the width and height of the Canvas, as follows:

The code is as follows:

Canvas.width= 400

Canvas.height = 300

However, using JS to change the width and height of the Canvas by manipulating CSS is as follows:

The code is as follows:

Canvas.style.width = '400px'

Canvas.style.height = '300px'

It can be seen that the grammatical difference is very obvious. Actually, the difference is more obvious.

What's the difference between them?

For example, for a canvas 1000 wide, you draw a vertical line on the left side of the canvas, 100 pixels wide. At this point, you set the width of the canvas to 500, which is equivalent to clicking off the right side of the canvas, but the width of the vertical bar is still 100.

But if you use CSS to change the width of the canvas to 500, it is equivalent to squeezing the canvas from 1000 to 500, so the width of the vertical bar becomes 50. 5%.

(this is only a theoretical situation. In fact, when you set the width of the canvas, he will empty out what has been drawn.)

The width and height of Canvas itself is an attribute of the canvas itself, and the width and height given to him by css can be seen as zooming. If you zoom too casually, the graphics on the canvas may become unrecognizable to yourself.

So there is a suggestion: unless there are special circumstances, do not use css to define the width and height of Canvas.

We have the canvas, and now let's take it out:

The code is as follows:

Var cvs = document.getElementById ('cvs')

Look, it's exactly the same way to get other elements.

Paintbrush

Now that I have the canvas, I need a pen if I want to doodle on it. The way canvas gets the pen is as follows:

Var ctx = cvs.getContext ('2d'); where the getContext method is used to hold the pen, but here is another parameter: 2d, what does that mean? This can be seen as a type of brush.

Since there is 2D, then there will be 3D? It is estimated that there will be in the future, but not now. So let's use this 2d pen first.

So can we put some more pens in reserve? The answer is no.

I want to ask a question: how many pens do you use when you draw at the same time? It is believed that 99.9% of people can only use one, although some martial arts masters such as Xiao Longnu can draw two hands at the same time, but this is very unrealistic for ordinary people, isn't it?

So now you can be relieved that html5's canvas tag only supports using one pen at the same time!

Some students who are familiar with JS may want to play a trick: I will use the previous method of getting brushes to get a few more pens, won't I?

For example:

The code is as follows:

Var con = cvs.getContext ('2d')

Var ctx = cvs.getContext ('2d')

Ha, seems to have succeeded, before the test, I also think so, but in fact, this is just an illusion!

Because I found that one of the pens was dipped in red ink, and the other was automatically dipped in red ink! Because the two pens are one! Fuck .

If you need to draw different colors, the way to do this is to keep dipping the only "pen" in a new color.

In fact, this is not an advantage, but a defect, which you will realize later.

Coordinate

The 2d world, which is the plane, to determine a point on a plane, requires two values, the x coordinate and the y coordinate. This is a very important basic concept.

The origin of canvas is the upper left corner, just like flash. But what hurts is that the origin in mathematics is the lower left corner. This... Let's just say get used to it.

Some basic knowledge of drawing

First of all, you need to know, what kind of coordinate changes will draw what lines? For example, if the x coordinate becomes larger and the y coordinate remains the same, a horizontal line can be drawn; if the y coordinate changes and the x coordinate remains the same, it is a vertical line.

Of course, there are slashes, left slashes, right slashes and so on, if you can compare the picture, most people can understand it at a glance; just draw with the code is more depressing, can only rely on logical thinking to figure it out.

If you feel chaotic about the lines now, don't worry, you will naturally understand in the process of learning.

Other

One feature of canvas that is different from the real canvas is that it is transparent by default and has no background color. This is very important most of the time.

The above is all the content of the article "how to draw html5 Canvas". Thank you for reading! Hope to share the content to help you, more related knowledge, 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.