First HTML5 knowledge, first html5 knowledge

First HTML5 knowledge, first html5 knowledge

Uh ..

Today, let's take a look at some HTML5 things.

Preparations:

1. a browser that supports HTML5 (Opera11.52 and IE9 I use). Of course, Firefox and Chrome support HTML5 in recent versions.

2. An HTML Manual (manual) for easy access.

I found that most of the currently used canvas labels are used, so I directly read the legendary canvas labels!

1. canvas labels in HTML are used for drawing... It seems a bit nonsense. Isn't canvas a canvas.

2. drawing in the canvas label is controlled by js, which includes several newly added js functions in HTML5.

To draw a picture, the first step is to obtain the context -- context of the drawing, so such a function must be used.

GetContext (contextId)

The value of contextId in the materials I have seen is '2d '. It seems that HTML5 currently does not support '3d', but I cannot remember the details.

This function returns the context of a canvas.

The specific retrieval method is as follows:

Var context = document. getElementById ('canvasid'). getContext ('2d ')

Suddenly, canvas, like the previous html elements, can be controlled using css (this is really nonsense ).

After obtaining the context, you can start drawing, right!

To start drawing, you need to call a function beginPath () first ()

The specific usage is as follows:

Context. beginPath ();

Of course, if you have beginPath (), you have to have endPath ()..... But this is wrong. This is closePath (). I think it can be understood as a closed path, that is, to complete the drawing.

Context has several setting attributes.

1. Set the lineWidth of the line when drawing. The lineWidth is set to context. lineWidth = 3; // 3 is the lineWidth value. The larger the value, the thicker the line. The default value is 1.

2. Set strokeStyle to context. strokeStyle = "rgb (255, 0, 0 )";

3. Set the fill color fillStyle to context. fillStyle = "red". The setting method is the same as that above ..

Start Painting

Of course, I only learned two types of graphics

1. Rectangle:

Context. rect (left, top, width, height) // This method does not seem to implement the previously set attributes, such as colors or something.

Context. strokeRect (left, top, width, height) // This method will implement the previously set attributes.

2. Circle. Why is it an elliptical image ?], Painting method:

Context. arc (120,120, 50, 0, Math. PI, true); // 120,120 the two values are set to the center of the center; 50 is the radius; 0 is the parameter here to indicate what properties are not clear, did not see the document, only when the value is 0, there are only half a circle. This should determine the number of circles to be drawn ^ _ ^; Math. PI, which is understandable. true indicates the part above the circle, and false indicates the part below the circle. Of course, the above and the following sections are related to the preceding parameter 0. As the value of 0 changes, the drawn results are different.

After drawing, there are two filling functions (which may be a bit inaccurate:

1. context. stroke (); // This function is executed after context. closePath () is called (why is it executed later? I don't know. I wrote this in the manual, but I haven't tested it in other cases.) The execution result is to fill the Border (Border) of the drawn image)

2. context. fill (); // This function... Alas, skip it if you don't want to repeat those words. The execution result is filling (truly filling) the internal area of the drawing.

Of course, if you want to draw a graph with a border and a filling effect, you can call the context. stroke () and context. fill () functions.

The following code is attached:

<! Doctype html>