Use Canvas in HTML5 to draw a smiling face. _ html5 tutorial skills-

This article describes how to use Canvas in HTML5 to draw a smiling face. Canvas is a basic function in HTML5. For more information, see, you will learn a web technology called Canvas and its association with the Document Object Model (often called DOM. This technology is very powerful because it enables web developers to access and modify HTML elements by using JavaScript.

Now you may want to know why we need to use JavaScript. In short, HTML and JavaScript are mutually dependent. Some HTML components, such as canvas elements, cannot be used independently from JavaScript. After all, if we cannot draw on it, what is the purpose of canvas?

To better understand this concept, we will try to draw a simple smiling face through a sample project. Let's get started.
Start

First, create a new directory to save your project files, and then open your favorite text editor or web development tool. Once you have done this, you should create an empty index.html and an empty script. js, and then we will continue to edit it.

Next, we will modify the index.html file, which does not involve many things, because most of the code of our project will be written in JavaScript. What we need to do in HTML is to create a canvas element and reference script. js, which is quite straightforward:

Copy XML/HTML Code to clipboard

In this case, I use a group of tags

This attribute simply adds a string to the element for unique identification. Later we will use this attribute to locate our canvas Element in the JavaScript file. Next, we will use the script to mark and reference the JavaScript file, which specifies the JavaScript language type and the path of the script. js file.
Operate DOM

If the name is "Document Object Model", we need to use another language to call the interface to access HTML documents. Here, we use JavaScript. Therefore, we need to assign a simple reference on the built-in Document Object. This object corresponds directly to our

Copy XML/HTML Code to clipboard

1. Var canvas = document. getElementById ('canvas ');

Remember how to use id = "canvas" to define a canvas element? Now we use the document. getElementById method to obtain this element from the HTML document. We simply pass the string matching the required element id. Now that we have obtained this element, we can use it for painting.

To use canvas for painting, we must operate its context. Surprisingly, a canvas does not contain any plotting methods or attributes, but its context object has all the methods we need. A context is defined as follows:

Copy XML/HTML Code to clipboard

1. Var context = canvas. getContext ('2d ');

Each canvas has several different contexts. For the purpose of the program, only one two-dimensional context is enough. It will obtain all the drawing methods we need to create a smiley face.

Before we start, I must inform you that the context stores two color attributes, one for the brush and the other for the fill ). For our smiling faces, we need to set the fill to yellow and the paint brush to black.

Copy XML/HTML Code to clipboard

1. Context. fillStyle = 'yellow ';
2. Context. strokeStyle = 'black ';

After setting the color required by the context, we must draw a circle for the face. Unfortunately, there is no circular predefined method in the context, so we need to use the so-called path ). The path is just a series of connected straight lines and curves, and the path is closed after the drawing is complete.

Copy XML/HTML Code to clipboard

1. Context. beginPath ();
2. Context. arc (320,240,200, 0, 2 * Math. PI );
3. Context. fill ();
4. Context. stroke ();
5. Context. closePath ();

In this way, we use context to start a new path. Next, we create an arc with a radius of 320 pixels on the point (240, 200. The last two Parameters specify the initial and final angle of the constructed arc, So we pass 0 and 2 * Math. PI to create a complete circle. Finally, we use context to fill and draw the path based on the color we have set.

Although closing the path is not necessary for the script function, we still need to close the path so that we can start to draw new eyes and mouth in the smiling face. The eyes can be done in the same way. Each eye requires a smaller radius and different positions. But first, we must remember to set the fill color to white.

Copy XML/HTML Code to clipboard

1. Context. fillStyle = 'white ';
3. Context. beginPath ();
4. Context. arc (270,175, 30, 0, 2 * Math. PI );
5. Context. fill ();
6. Context. stroke ();
7. Context. closePath ();
9. Context. beginPath ();
10. Context. arc (370,175, 30, 0, 2 * Math. PI );
11. Context. fill ();
12. Context. stroke ();
13. Context. closePath ();

The above is all the code about the eyes. Now the mouth is very similar, but this time we will not fill the arc, our angle will be configured as a semi-circle. To do this, we need to set the starting angle to zero and ending angle to-1 * Math. PI. Remember, do not forget to set the paint brush color to red.

Copy XML/HTML Code to clipboard

1. Context. fillStyle = 'red ';
3. Context. beginPath ();
4. Context. arc (320,240,150, 0,-1 * Math. PI );
5. Context. fill ()
6. Context. stroke ();
7. Context. closePath ();

Congratulations

Good job. You have completed this tutorial. You have made a great smiling face and learned at the same time.