html5 Canvas drawing tutorial (1)—Basic knowledge of drawing

Comment: Canvas means canvas. The Canvas in Html5 is really very similar to the canvas in real life. Therefore, treating it as a real canvas can speed up understanding; if you want to learn Canvas drawing, you must have a Javascript foundation. I won’t say much, get to the point.

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

Canvas means canvas. The Canvas in Html5 is really very similar to the canvas in real life. So, seeing him as a tangible canvas can speed up understanding.

canvas

To draw 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 spend money on the web page, just write a canvas, similar to:

<canvas>Your browser does not support canvas</canvas>

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

It is necessary to mention the characteristics of this canvas. It has two native properties, namely width and height. At the same time, because it is also an html element, he can also use css to define width and height. However, be sure to pay attention: its own width and height are different from the width and height defined through css!

We use JS to change the width and height of Canvas, like this:

canvas.width= 400

canvas.height = 300

But using JS to change the width and height of Canvas by operating CSS, it is like this:

canvas.style.width = '400px'

canvas.style.height = '300px'

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

What is 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 time, you set the width of the canvas itself to 500, which is equivalent to clicking off the right half of the canvas, but at this time the width of the vertical line is still 100.

But if you use CSS to change the width of the canvas to 500, it is equivalent to extruding the canvas from 1000 to 500, so the width of the vertical line becomes 50.

(This is just a theoretical situation. When actually setting the width of the canvas, it will clear the drawn content.)

Canvas's own width and height are attributes of the canvas itself, and the width and height given by CSS can be regarded as scaling. If you scale too casually, then the graphics on the canvas may become unrecognizable to you.

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

The canvas has it, and now we take it out:

var cvs = document.getElementById('cvs');

Look, it's exactly the same as getting other elements.

brush

Now that the canvas is already available, I want to doodle it on it, of course I also need a pen. The method of obtaining a pen is as follows:

var ctx = cvs.getContext('2d'); where getContext method is used to hold a pen, but there is another parameter here: 2d. What does this mean? This can be regarded as a type of brush.

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

So can we put a few more pens to spare? The answer is no.

I want to ask a question: How many pens do you use at the same time when drawing pictures? I believe that 99.9% of people can only use one. Although some martial arts masters such as Xiaolongnu can draw with both hands at the same time, this is very unrealistic for ordinary people, right?

So now you can feel relieved because the html5 canvas tag also only supports using one pen at the same time!

Some students who are familiar with JS may want to be clever: I use the method of getting the brush in the previous way to get a few more pens, wouldn’t it be enough? !

for example:

var con = cvs.getContext('2d');

var ctx = cvs.getContext('2d');

Hahahaha, it seems to be successful. I thought so before the test, but in fact, this is just an illusion!

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

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

This is actually not an advantage, it is a defect, you will experience it in the future.

coordinate

The 2d world is a plane. To determine a point on a plane, two values, x-coordinates and y-coordinates are required. This is a very important basic concept.

The origin of canvas is the upper left corner, the same as flash. But what's so annoying is that the origin in mathematics is the lower left corner. This...

Some basic knowledge about 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 unchanged, a horizontal line can be drawn; if the y coordinate changes but the x coordinate remains unchanged, a vertical line can be drawn.

Of course, there are also diagonal lines, left diagonal lines and right diagonal lines. If you can compare the pictures, most people can understand them at once; it is more depressing to draw with code, and you can only think of it through logical thinking.

If you feel confused about the lines now, don’t worry, you will naturally understand it during the learning process.

other

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