HTML5 canvas drawing tutorial case analysis_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.

Note: It is necessary to mention the characteristics of this canvas. Like IMG, it has two native attributes, namely width and height. At the same time, because it is also an html element, so He can also use CSS to define width and height, but be sure to note: his own width and height are different from the width and height defined through CSS!
We use JS to change the native width and height of Canvas, as follows:

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’s the difference between them?
For example, on a canvas with a width of 1000 pixels, you draw a vertical line on the left side of the canvas with a width of 100 pixels. 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 native 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 you scale it too casually, 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 of getting the pen from canvas is as follows:

Copy the code

The code 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? This can be regarded as 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 the code

The code is as follows:

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

Hahahaha, it seems to be successful, but not I thought so before the test, 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, but since everyone has studied mathematics, I won’t go into details.
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... I can only say that you just get used to it

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.