Home > Tutorials > Html Tutorials

Using Canvas in HTML5 to draw a smiley face, html5canvas

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Using Canvas in HTML5 to draw a smiley face, html5canvas
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

Today, 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
  1. <! DOCTYPE html> <body>
  3. <Canvas id = 'canvas 'width = '000000' height = '000000'> </canvas>
  4. <Script type = 'text/javascript 'src = 'script. js'> </script>
  6. </Body>

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> mark to 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.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
how to draw bear face how to draw pug face android smiley face android smiley face smiley face unicode sideways smiley face android canvas draw
Related Article
What is the META tag in HTML? Introduction to META Tag proper...
An article that allows you to read basic HTML rules and Web p...
How does HTML set the background color? HTML background color...
HTML5 new label--nav label Introduction
What are the canvases and SVG in HTML5? What is the differenc...
How do I use the HTML5 feature of the Rel property in the?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More