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

Although everyone calls Canvas the new label of HTML5, it seems that Canvas is a new knowledge of the HTML language, but in fact Canvas drawing is done through JavaScript. Therefore, if you want to learn Canvas drawing, you must have a Javascript foundation.
In addition, when it comes to drawing, there are always some image terms and knowledge points, so if you have experience in drawing 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 it as a physical canvas can speed up understanding.

Canvas
To paint with canvas, first of all, you need a "canvas". If you don’t have a canvas in your bookshelf, you can buy a roll and put it in there. Of course, we don’t need to spend money to buy it on the web page, we can just write a canvas, similar to:

Copy code

The code is as follows:

Your browser does not support canvas

The text in the label is for browsers that do not support canvas, and those that support it will never be able to see it.
It is necessary to talk about the characteristics of this canvas. It has two native attributes, namely width and height. At the same time, because it is also an html element, it can also use css to define width and height. However, tens of millions of Please note: 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 the Canvas, like this:

Copy the code

The code is as follows:

canvas.width= 400
canvas.height = 300

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

Copy code

The code is as follows:

canvas.style.width = '400px'
canvas.style.height = '300px'

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

What is their difference?
For example, on a canvas with a width of 1000 pixels, 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 the width of the vertical line is still 100 at this time.
But if you change the width of the canvas to 500 through CSS, it is equivalent to squeezing the canvas from 1000 to 500, so the width of the vertical line becomes 50.
(This is only a theoretical situation, in practice When setting the width of the canvas, it will clear out the drawn content. )
The width and height of the canvas itself are the properties of the canvas itself, and the width and height given by css can be regarded as scaling. If it is too casual, the graphics on the canvas may become unrecognizable to you.
So here is a suggestion: Unless there are special circumstances, do not use css to define the width and height of the Canvas.
The canvas is there, now let’s take it out:

Copy the code

The code is as follows:

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

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

Brush
Now that you have the canvas, if you want to graffiti on it, of course you need a pen. The method for canvas to get the pen is as follows:
var ctx = cvs.getContext('2d'); The getContext method is used to get the pen, but there is another parameter here: 2d. What does this mean? You can see this Painting is the type of brush.
Since there is 2D, then there will be 3D? I guess there will be in the future, but not now. So let's use this 2d pen first.

So can we put a few more pens in reserve? The answer is no.
I want to ask a question: How many pens do you use at the same time when drawing? I believe 99.9% of people can only use one. Although some martial arts masters such as Xiao Longnu can draw with two hands at the same time, this is very unrealistic for ordinary people, isn't it?
So now you can feel relieved, because the canvas tag of html5 only supports using one pen at the same time!
Some students who are more familiar with writing JS may want to play a trick: I can use the previous method of obtaining brushes to get a few more pens, isn’t that enough? !
For example:

Copy code

The code is as follows:

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

Hahahaha, it seems to have worked. I thought so before I tested it, but in fact it was just an illusion!
Because I discovered that when I dipped one of the pens in red ink, the other pen was automatically dipped in red ink! Because the two pens are one! fuck.
If you need to draw different colors, the way is to keep dipping this only "pen" in new colors.
This is actually not an advantage, but a flaw, which you will realize in the future.

Coordinates
The 2d world is a plane. To determine a point on a plane, two values ​​are required, the x coordinate and the y coordinate. This is a very important basic concept.
The origin of canvas is the upper left corner, the same as flash. But the annoying thing is that the origin in mathematics is the lower left corner. This... can only be said to be a habit

Some basic common sense 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 but 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 slashes, left slashes, right slashes, etc. If you can compare them with the pictures, most people can understand them at a glance; just drawing them with code is more depressing, and you can only rely on logical thinking. come out.
Don’t worry if you feel confused about lines now, you will naturally understand them as you learn.

Others
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.