HTML5 canvas painting tutorial 1: before getting started

Although canvas is called a new HTML5 label, it seems that canvas is a new knowledge of the HTML language, but canvas painting is actually done through JavaScript. So if you want to learn canvas paintingJavascript basics are required.

In addition, there are always some terms and knowledge points for drawing images, so if you haveExperience as a graph or artistIt is easier to learn canvas.

Canvas, Indicating that the canvas is also. 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:

 
<CanvasID= "CVS"Width= "800"Height= "600">Your browser does not support canvas</Canvas>
 

The text in the label isCanvas browsers are not supportedYou can never see the supported ones.

Note:: The canvas has two native attributes, that is, the same as IMG.Width and height. 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:

 
Canvas. width = 400Canvas. Height= 300
 

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

 
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 only a theoretical case. In fact, when you set the native width of canvasClear..)

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 have a suggestion:Unless in special cases, do not use CSS to define the width and height of the canvas.

Now that the canvas is ready, let's take it out:

 
VaRCVS = 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:

 
VaRCTX = 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:

 
VaRCon = cvs. getcontext ('2d');VaRCTX = 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 needDraw different colorsThe solution is to keep the only pen in the new color.

This is not an advantage.DefectsIn the future.

Coordinates

The 2D world is a plane. To determine a point on a plane, two values, X and Y 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.Transparent by default, No background color. This is important most of the time.

Original