Html5 canvas graphic tutorial Case Analysis

Comments: Canvas, which means Canvas. Although we all call Canvas a new html5 label, it seems that Canvas is a new knowledge of the html language, but Canvas is actually made through javascript. Therefore, if you want to learn Canvas painting, you must have a Javascript base. Although everyone calls Canvas as a new html5 tag, it seems that Canvas is a new knowledge of the html language, but actually, Canvas painting is done through javascript. Therefore, if you want to learn Canvas painting, you must have the Javascript basics.
In addition, there are always some terms and knowledge points for Drawing Images. Therefore, it is easier to learn Canvas if you have experience in drawing or art.
Canvas. Canvas in Html5 is also very similar to Canvas in real life. Therefore, seeing him as a real canvas can speed up understanding.

Canvas
First, you need a canvas ". If there is no canvas in your bookshelf, you can buy one and put it in it. Of course, we don't need to spend money on the webpage. Just write a canvas directly, like:

The Code is as follows:
<Canvas id = "cvs" width = "800" height = "600"> canvas is not supported in your browser. </canvas>

The text in the label is visible to browsers that do not support canvas, and can never be seen.

Note:: The canvas has two native attributes, that is, width and height, like IMG. at the same time, because he is also an html element, he can also use css to define width and height. However, pay attention to the following: its own width and height are different from those defined by css!
We use JS to change the native width and height of Canvas, as shown in the following figure:

The Code is as follows:
Canvas. width = 400
Canvas. width = 300

However, JavaScript is used to change the width and height of the Canvas by operating CSS, as shown in the following code:

The Code is as follows:
Canvas. style. width = '400px'
Canvas. style. height = '300px'

The syntax difference is obvious. In fact, the difference is more obvious.
What are their differences?
For example, if you draw a vertical line on the left side of a canvas with a width of 1000 pixels. Now you set the width of the canvas to 500, which is equivalent to dropping the right half of the canvas, but 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 squeeze the canvas from 1000 to 500, so the width of the vertical line is changed to 50.
(This is just a theoretical case. In fact, when you set the native width of canvas, it will clear the drawn content ..)
The width and height of a Canvas are the attributes of the Canvas. The width and height given by css can be seen as scaling. If you zoom too casually, the image on the canvas may not be recognized by you.
Therefore, we recommend that you do not use css to define the width and height of the Canvas unless in special cases.
Now that the canvas is ready, let's take it out:

The Code is as follows:
Var cvs = document. getElementById ('cvs ');

The method is the same as that for getting other elements.

Paint Brush
Now that the canvas is ready, you still need a pen to graffiti on it. The canvas method is as follows:

The Code is as follows:
Var ctx = cvs. getContext ('2d ');

The getContext method is used to get the pen, but there is another parameter: 2d. What does this mean? This can be viewed as a type of paint brush.
Since there is 2D, there will be 3d? It is estimated that there will be in the future, but not now. So we should use this 2d pen first.
! How many more pens can we store for backup? The answer is no.
I want to ask a question: how many pens do you use to draw pictures at the same time? I believe that 99.9% of people can only use one hand. Although some martial arts experts, such as the little dragon girl, can draw two hands at the same time, this is unrealistic for the average person, isn't it?
So now you can feel gratified, because html5 canvas labels only support using a pen at the same time!
Some people who are familiar with JS writing may want to be clever: I just used the previous method to get a paint brush, just a few more strokes ?!

For example:

The Code is as follows:
Var con = cvs. getContext ('2d ');
Var ctx = cvs. getContext ('2d ');

Hahahaha, it seems to have succeeded. I thought so before I did the test, but in fact this is just an illusion!
I found that I dipped one pen in red ink, and the other pen automatically dipped in red ink! Because the two pens are integrated! Fuck.
If you need to draw different colors, you can just keep this unique pen dipped in new colors.
This is not an advantage, but a defect. You will understand it later.

Coordinates
A 2d world is a plane. To determine a point on a plane, two values, x coordinate and y coordinate are required. This is a very important basic concept, but I will not talk much about it because everyone has studied mathematics.
The origin of canvas is the upper left corner, which is the same as that of flash. However, the point of origin in mathematics is in the lower left corner. This... You can only say that you are used to it.

Others
A canvas is different from a realistic canvas. It is transparent by default and has no background color. This is important most of the time.