Home > Article > Web Front-end > Code for drawing smiley faces using Canvas in HTML5

Code for drawing smiley faces using Canvas in HTML5

不言Original: 2018-07-02 11:21:076111browse

This article mainly introduces the tutorial of using Canvas in HTML5 to draw a smiling face. Using Canvas to draw is a basic function in HTML5. Friends who need it can refer to it

201557180008373.jpg (600×436) Today, you You'll learn about a web technology called Canvas and how it relates to the Document Object Model (often called the DOM). This technology is very powerful as it enables web developers to access and modify HTML elements by using JavaScript.

Now you may be wondering why we need to go big with JavaScript. In short, HTML and JavaScript are interdependent, and some HTML components, such as the canvas element, cannot be used independently of JavaScript. After all, what good is a canvas if we can't draw on it?

To better understand this concept, let's try drawing a simple smiley face through a sample project. let's start.
Getting Started

Start by creating a new directory to save your project files, then open your favorite text editor or web development tool. Once you do this, you should create an empty index.html and an empty script.js, which we will continue editing later.

201557180130749.jpg (600×415)
Next, let’s modify the index.html file, which won’t involve much since most of the code for our project will be written in JavaScript. What we need to do in HTML is create a canvas element and reference script.js, which is pretty straightforward:

<!DOCTYPE html><body>
   <canvas id=&#39;canvas&#39; width=&#39;640&#39; height=&#39;480&#39;></canvas>
   <script type=&#39;text/javascript&#39; src=&#39;script.js&#39;></script>
</body></html>

To explain, I use a set of tags 4e1ac47ef86103a76691c220eb7d9b57, in this way, we can add more elements to the document through the body. Seizing this opportunity, I completed a 640*480 canvas element with the id attribute canvas.

This attribute simply adds a string to the element for unique identification. We will use this attribute later to locate our canvas element in the JavaScript file. Next, we reference the JavaScript file using the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag, which specifies the JavaScript language type and the path to the script.js file.
Operation DOM

As its name "Document Object Model", we need to access the HTML document by calling the interface using another language. Here, the language we use is JavaScript. To do this, we need to place a simple reference on the built-in document object. This object corresponds directly to our f4c4880127ae9dd2e05b78c78da182f8 tag and, similarly, it is the basis of the entire project since we can access elements and perform changes through it.

var canvas = document.getElementById(&#39;canvas&#39;);

Remember how we used id="canvas" to define a canvas element? Now we use the document.getElementById method to get 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 start painting with it.

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

var context = canvas.getContext(&#39;2d&#39;);

Each canvas has several different contexts. According to the purpose of the program, only one two-dimensional context is enough. We'll get all the drawing methods we need to create a smiley face.

Before we begin, I must inform you that the context stores two color properties, one for the stroke and one for the fill. For our smiley face, we need to set the fill to yellow and the brush to black.

context.fillStyle = &#39;yellow&#39;;   
context.strokeStyle = &#39;black&#39;;

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

context.beginPath();   
context.arc(320, 240, 200, 0, 2 * Math.PI);   
context.fill();   
context.stroke();   
context.closePath();

Explained in this way, we use context to start a new path. Next, we create an arc with a radius of 200 pixels at the point (320, 240). The last two parameters specify the initial and final angles to build the arc from, 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 required for the script to function, we still need to close the path so we can start drawing the new eyes and mouth of the smiley face. The eyes can be done the same way, each eye will need a smaller radius and a different position. But first we have to remember to set the fill color to white.

context.fillStyle = &#39;white&#39;;   
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 for eyes. Now the mouth is very similar, but this time we won't fill the arc, our angle will be configured as a semicircle. To do this, we need to set the starting angle to zero and the ending angle to -1 * Math.PI. Remember, don't forget to set the brush color to red.

context.fillStyle = &#39;red&#39;;   
context.beginPath();   
context.arc(320, 240, 150, 0, -1 * Math.PI);   
context.fill()   
context.stroke();   
context.closePath();

Congratulations

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

How to draw pictures on js HTML5 canvas

HTML5 and CSS3 code to realize 3D display of product information

HTML5 Canvas implements drawing a pixel-wide thin line

The above is the detailed content of Code for drawing smiley faces using Canvas in HTML5. For more information, please follow other related articles on the PHP Chinese website!

php JavaScript html5 css3 html math 字符串接口 JS 对象 dom canvas

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Implementation of Html5 clipboard functionNext article：Implementation of Html5 clipboard function

See more

Code for drawing smiley faces using Canvas in HTML5

Related articles