Code for drawing smiley faces using Canvas in HTML5-H5 Tutorial-php.cn

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>

Copy after login

To explain, I use a set of tags < html > ; and < body>, 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