HTML5 Canvas introductory learning tutorial_html5 tutorial skills

HTML5

What exactly is HTML5? In the W3C HTML5 FAQ, this is stated about HTML5: HTML5 is a free license developed under an open platform.
Specifically, there are two understandings of this sentence:
“
refers to a group of technologies that together constitute the future open network platform. These technologies include HTML5 specifications, CSS3, SVG, MATHML, Geolocation, XmlHttpRequest, Context 2D, Web Fonts, and other technologies. The boundaries of this set of technologies are informal and change over time.
Refers to the HTML5 specification and is certainly part of the Open Web Platform.

”

Browser Support for Canvas
Below I’ve listed the most popular web browsers and the minimum version numbers at which they started supporting the Canvas element.

I recommend using Chrome here.

Simple HTML5 page

XML/HTML CodeCopy content to clipboard

1. /span>>
3. html lang="zh" >
5. head>
6.  meta charset="UTF- 8"> 
7.  title>Basic HTML5 pagetitle>
8. head>
10. body> Hello Airing! body>
12. html>

The demo running results are as follows:

HTML is composed of tag elements shaped like angle brackets . These tags usually appear in pairs, and tags can only be nested and not cross.
Extension:
What appears in pairs is called a closed tag, and what appears singly is called a single tag. It is closed no matter what (a single tag does not need to be closed, but closure is strictly required in XHTML). Closing tags are divided into start tags and end tags. For example,

is a start tag and is an end tag. Self-labels such as
, etc.
For more tags, it is recommended that you learn about them yourself. We recommend the W3school platform for self-study.
Here we focus on the tags that appear in the above code.

XML/HTML CodeCopy content to clipboard

1. /span>>

This tag indicates that the web browser will render the page in standards mode. This is required for HTML5 documents according to the HTML5 specification defined by the W3C. This tag simplifies the long-standing strange differences in how different browsers render HTML pages. It is usually the first line in the document.

XML/HTML CodeCopy content to clipboard

1. html lang="en" >

This is the tag that contains the language description, for example, "en" for English and "zh" for Chinese.

XML/HTML CodeCopy content to clipboard

1. head>... head> 

These two markers indicate the beginning and end of the header information respectively. The tags contained in the header are the title, preface, description and other content of the page. It is not displayed as content itself, but affects the display effect of the web page. The most commonly used tags in headers are the

.
To sum up, the HTML5 web page is composed of the and parts in the first line, and is mainly divided into two parts - the header specified by the tag part, and the body specified by .
In this way, we have figured out the basic structure of the simplest HTML web page.

Add a Canvas
Adding a Canvas in HTML is very simple, just add the tag in the part of HTML! You can refer to the code below.

XML/HTML CodeCopy content to clipboard

1. /span>>html lang ="zh">head> meta charset="UTF-8"> ;title>Basic HTML5 pagetitle > head>
2. body>
3.  canvas id="canvas" >
4. Your browser doesn’t support Canvas? ! Change it quickly! !
5.  canvas>body> 
6. html>

Since the results page is a completely blank page, I won’t post a picture here. You may be curious, why is it blank? (Nonsense, I haven’t had time to draw yet!) The original meaning of Canvas is canvas, which means canvas (nonsense...). The canvas is transparent and invisible in HTML5.
What does the text in the tag mean? That is, once the browser does not support Canvas when executing the HTML page, this text will be displayed. In other words, as long as your browser supports Canvas, this text will not be displayed on the page.
What does the id in mean? id is one of the attributes of the tag. It is used in JavaScript code to specify the name of a specific , just like a person's ID number, it is unique.
In order to display the Canvas more clearly and facilitate subsequent demonstrations, I slightly modified the code, and all subsequent drawings will be drawn on this Canvas.

XML/HTML CodeCopy content to clipboard

1. html>  
2. html lang="zh">  
3. head>  
4. meta charset="UTF-8">  
5. title>基础的Canvastitle>  
6. head>  
7.   
8. body>  
9. div id="canvas-warp">  
10.     canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600">  
11.     你的浏览器居然不支持Canvas？！赶快换一个吧！！   
12.     canvas>  
13. div>  
14. body>    
15. html>  

Run result:

A few notes on the above code:

1. Added the

tag and wrapped the in it. Personal habit is of no use for the time being.
2. Specify the width and height attributes for the tag to specify its width and height.
3. Added an inline style to the tag to make it a block-level element and display it in the center.

I will not explain the content of CSS here. After all, it is not the protagonist of this course, and it will take a lot of space to expand it.

Reference Canvas element

Document Object Model (DOM)
Document Object Model (DOM) is a standard programming interface recommended by the W3C organization for processing extensible markup languages. The history of the Document Object Model can be traced back to the "browser war" between Microsoft and Netscape in the late 1990s. In order to compete for life and death in JavaScript and JScript, both parties gave browsers powerful functions on a large scale. Microsoft has added many proprietary things to web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, which makes many web pages unable to display properly using non-Microsoft platforms and browsers. DOM is the masterpiece brewed at that time.
The Document Object Model represents all objects on an HTML page. It is language neutral and platform neutral. It allows the content and style of the page to be updated again after it has been rendered by the web browser. Users can access the DOM through JavaScript.
Before you start using , you first need to understand two specific DOM objects: window and document.

The window object is the highest level of the DOM. This object needs to be detected to ensure that all resources and code have been loaded before starting to use the Canvas application.
The document object contains all the HTML tags on the HTML page. This object needs to be retrieved to find instances of being manipulated using JavaScript.

JavaScript placement location
Using JavaScript to program Canvas will cause a problem: where to start the JavaScript program in the created page?
Put JavaScript into the

. However, placing the JavaScript program here means that the entire HTML page must be loaded before JavaScrpit can run with HTML. This JavaScript code will also start executing before the entire page is loaded. As a result, you must check whether the HTML page has been loaded before running the JavaScript program.
A recent trend is to place JavaScript before the tag at the end of the HTML document, thus ensuring that the entire page has loaded while the JavaScript is running. However, since you need to use JavaScript to test whether the page loads before running the program, it is best to place the JavaScript in the .
However, I don’t take the usual path (laughs), so in subsequent cases, I still put the JavaScript code at the end of the according to my own coding style. Of course, if there is a lot of JavaScript code, it is recommended to load external .js files. The code is roughly as follows:

JavaScript CodeCopy content to clipboard

1. src="bootstarp.js" >

In actual project development, HTML, CSS, and JS are completely separated. However, the code used for case demonstrations is slightly less, so most of them do not use the method of loading external .js files.

Getting the canvas object
Getting the canvas object is actually just one sentence.

JavaScript CodeCopy content to clipboard

1. var canvas = document.getElementById("canvas");

Var is used for variable definition. Since JS is a weakly typed language, var is used to define any variable. The canvas following var is a variable. Use the getElementById() method of the document object to obtain the object by id. Previously, we gave the tag an id named canvas, so the last canvas in this sentence refers to the id of - canvas. (Is it a bit confusing? You need to read it a few times to figure it out.)
Getting a brush (2D environment)
What do you need first to draw? Paintbrush. Obtaining the canvas brush is also a matter of one sentence, which is to directly use the canvas object just obtained and call its getContext("2d") method.

JavaScript CodeCopy content to clipboard

1. var context = canvas.getContext("2d");

The context here is the brush.
In other tutorials, the term 2D environment is used. I think brushes are more vivid. The inspiration comes from the g brush of the Graphics class in Java, and the principle is the same.

Summary
There are only three steps to preparation:

1. Lay out the canvas: add the canvas element by adding the tag
2. Get the canvas: get the canvas object through the id of the tag
3. Get the brush: through the canvas object getContext("2d") method to obtain the 2D environment

The corresponding code for

is three sentences:

JavaScript CodeCopy content to clipboard

2. var canvas = document.getElementById("canvas");
3. var context = canvas.getContext("2d");

The complete code is as follows.

JavaScript CodeCopy content to clipboard

2. "zh">
4. "UTF-8">
9. "canvas-warp">
10. "canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto ;" width="800" height="600">
11. Your browser doesn’t support Canvas? ! Change it quickly! !

<script> </script>

window.onload = function(){

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

}

A few points to note:

1.JavaScript code needs to be wrapped in <script> tags. </script>

2.window.onload = function(){} will be executed immediately after loading the page, which means that the content of the function body after the page is loaded and executed.

At this point, the canvas and brush have been prepared. Next, let us use the brush (context object) to draw high-definition images! Wake up! The soul of an artist!