Shulou(Shulou.com)06/01 Report--

Most people do not understand the knowledge points of this article "how to draw a smiley face with Canvas in HTML5", so the editor summarizes the following contents, detailed contents, clear steps, and certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to draw a smiley face with Canvas in HTML5" article.

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, after which we will continue editing.

Next, let's modify the index.html file, which won't involve much, because most of the code for 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:

XML/HTML Code copies content to the clipboard

To explain it this way, I use a set of tags

And

In this way, we can add more elements to the document through body Seizing this opportunity, I finished a canvas element with an id attribute of canvas.

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

Manipulate DOM

As the name "document object Model", we need to access the HTML document by calling the interface in another language, which in this case is JavaScript. To do this, we need to place a simple reference on the built-in document object. This object corresponds directly to our

Tag, similarly, it is the basis of the entire project, because we can use it to get elements and implement changes.

XML/HTML Code copies content to the clipboard

Var canvas = document.getElementById ('canvas')

Remember how we used id = "canvas" to define a canvas element? Now that we use the document.getElementById method to get this element from the HTML document, we simply pass a string that matches the desired element id. Now that we have this element, we can use it for painting.

In order to use canvas for painting, we must manipulate its context. Surprisingly, an canvas does not contain any drawing methods or properties, but its context object has all the methods we need. A context definition is as follows:

XML/HTML Code copies content to the clipboard

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

Each canvas has several different contexts, and according to the purpose of the program, only a two-dimensional context will suffice, which will get all the drawing methods we need to create smiley faces.

Before we begin, I must tell you that the context stores two color attributes, one for brushes (stroke) and one for fill. For our smiling faces, we need to set the fill to yellow and the brush to black.

XML/HTML Code copies content to the clipboard

Context.fillStyle = 'yellow'

Context.strokeStyle = 'black'

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

XML/HTML Code copies content to the clipboard

Context.beginPath ()

Context.arc (320,240,200,0,2 * Math.PI)

Context.fill ()

Context.stroke ()

Context.closePath ()

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

Although closing the path is not necessary for the script's function, we still need to close the path so that we can start drawing new eyes and mouths in the smiley face. Eyes can be done in the same way, with each eye requiring a smaller radius and a different position. But first we must remember to set the fill color to white.

XML/HTML Code copies content to the clipboard

Context.fillStyle = 'white'

Context.beginPath ()

Context.arc (270,175,30,0,2 * Math.PI)

Context.fill ()

Context.stroke ()

Context.closePath ()

Context.beginPath ()

Context.arc (370,175,30,0,2 * Math.PI)

Context.fill ()

Context.stroke ()

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 semicircle. To do this, we need to set the start angle to zero and the end angle to-1 * Math.PI. Remember, don't forget to set the brush color to red.

XML/HTML Code copies content to the clipboard

Context.fillStyle = 'red'

Context.beginPath ()

Context.arc (320,240,150,0,-1 * Math.PI)

Context.fill ()

Context.stroke ()

Context.closePath ()

The above is about the content of this article on "how to draw a smiley face with Canvas in HTML5". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.