[Turn]html5 Canvas Drawing Tutorial (1)-Basic knowledge of drawing

Today to see a canvas tutorial, very popular mobile, so reproduced under.

While everyone calls canvas a new label for HTML5, it looks like canvas is a new knowledge of the HTML language, but canvas is actually done by JavaScript. So, if you want to learn canvas drawing, you have to have a JavaScript base.
In addition, drawing, there are always some aspects of the image terminology and knowledge points, so if you have a map or art experience, learning Canvas will be easier.

Canvas, which is also meant for canvases. And the canvas in HTML5 is really similar to the real-life canvas. So, seeing him as a real canvas can speed up understanding.

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

The code is as follows:

The text in the label is for the browser that does not support canvas to see, the support will never see.
The feature of this canvas is necessary to say that he has two native attributes, That is, width and height. At the same time, because he is also an HTML element, so he can also use CSS to define width and height, but it is important to note: his own wide height and the width of the definition of CSS is not the same!
We use JS to change the width of the canvas, this is:

The code is as follows:

Canvas.width= 400

But with JS by manipulating CSS to change the canvas's width, this is the case:

Copy CodeThe code is as follows:

Canvas.style.width = ' 400px '

It can be seen that the grammatical differences are obvious. Actually the difference is more obvious.

What is the difference between them?
For example, a canvas with a width of 1000, you draw a vertical line on the left side of the canvas, 100 pixels wide. At this point you set the width of the canvas itself to 500, the equivalent of the right side of the canvas to click Off, 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's equivalent to squeezing the canvas from 1000 to 500, so the width of the vertical bar becomes 50.
(This is only a theoretical case, and when you actually set the canvas's width, he clears out what has been painted.) )
Canvas itself is the property of the canvas itself, and the CSS to his wide height can be seen as scaling, if you zoom too casually, then the graphics on the canvas may become you do not recognize it.
So there's a suggestion: don't use CSS to define the canvas's width unless you're in a special situation.
The canvas has, and now we take him out:

Copy CodeThe code is as follows:

Var

Look, it's the same way you get other elements.

Brushes
Now that the canvas is there, you want to doodle on it, and of course you need a pen. The way canvas gets a pen is as follows:
var ctx = Cvs.getcontext (' 2d '), where the GetContext method is used to get a pen, but there is also a parameter: 2d, what does this mean? This can be seen as a kind of brush.
Since there is a few, then there will be 3d? There will be some later, but not now. So let's use this 2d pen first.

So can we put in a few more pens to spare? The answer is no.
I want to ask a question: How many pens do you use when you draw? Believe that 99.9% of people can only use one, although some martial arts masters such as Dragons can be two hands at the same time painting, but this is very unrealistic for the average person, is not it?
So now you can be thankful, because HTML5 's canvas tag only supports simultaneous use of a pen!
Some write JS to write the more familiar students may want to play a smart: I use the front to get the brush method more than a few pens out, not on the line?!
Like what:

Copy CodeThe code is as follows:

var con = Cvs.getcontext (' 2d 'var

Haha, like success, before the test I think so, but, in fact, this is just an illusion!
Because I found that I dipped one of the pens in red ink, and another pen was automatically dipped in red ink! Because the two pens are one! Fuck.
If you need to draw a different color, the only way to do this is to dip the unique "pen" into the new color.
This is actually not a merit, is a flaw, you will experience in the future.

coordinates
2d world, is the plane, in a plane to determine a point, requires two values, x-coordinate and y-coordinate. This is a very important basic concept.
The original point of the canvas is the upper-left corner, just like Flash. But the pain of the egg is the origin of mathematics in the lower left corner. This one... I can only say habit.

some basic knowledge of drawing
First you need to know, what kind of coordinate changes will draw what line? For example, if the x-coordinate becomes larger and the y-coordinate is not changed, a horizontal line can be drawn, and the y-coordinate will change and the x-coordinate will be the same.
Of course, there are slash, the left slash right slash what, if you can control the picture, most people can see that is understood, just draw with the code is more depressed, only by logical thinking out.
If you now feel that the line is chaotic, do not worry, in the course of learning will naturally understand.

other
Canvas has a different feature than the real canvas is that he is transparent by default and has no background color. This is important for most of the time.

[Turn]html5 Canvas Drawing Tutorial (1)-Basic knowledge of drawing