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

Today, I would like to talk to you about how to learn HTML5Canvas, many people may not know much about it. In order to make you understand better, the editor summarized the following content for you. I hope you can get something according to this article.

HTML5

What on earth is HTML5? In the frequently asked questions of the W3C HTML5, it is stated about HTML5 that HTML5 is a free license term developed under an open platform.

Specifically, there are two interpretations of this sentence:

"refers to a set of technologies that make up the future open network platform. These technologies include the HTML5 specification, 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, of course, part of the open network platform. "

Browser support for Canvas

Below I list the most popular Web browsers and the minimum version numbers where they begin to support Canvas elements.

SafariFirefoxIEChromeOpeariOS SafariAndroid Brower3.23.59910.63.22.1

I recommend using Chrome here.

A simple HTML5 page

XML/HTML Code copies content to the clipboard

Basic HTML5 page Hello Airing!

The running results of the demo are as follows:

HTML is made up of tag elements in the shape of angle brackets. These tags usually appear in pairs and can only be nested and not crossed.

Extend:

What appears in pairs is called a closed label, and a single one is called a single label. It is closed anyway (single tags can be unclosed, but closure is strictly required in XHTML). The closing tag is divided into the start tag and the end tag. In the case of the start tag, it is the end tag. Self-tagging, such as etc.

As for more labels, it is recommended that you know for yourself. Self-study on W3school platform is recommended.

Here we focus on the tags that appear in the above code.

XML/HTML Code copies content to the clipboard

This tag indicates that the Web browser will render the page in standard mode. This is required for HTML5 documents according to the HTML5 specification defined by the W3C. This tag simplifies the strange differences that have long occurred in rendering HTML pages in different browsers. It is usually the first line in the document.

XML/HTML Code copies content to the clipboard

This is a label that contains language descriptions, for example, "en" is English and "zh" is Chinese.

XML/HTML Code copies content to the clipboard

...

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

The following table lists all the tags and functions under the HTML head element:

The tag description defines the information of the document, defines the title of the document, defines the default link address of the page link tag, defines the relationship between a document and external resources, defines the metadata in the HTML document, defines the script file on the client side, defines the style file of the HTML document.

XML/HTML Code copies content to the clipboard

This tag indicates the character encoding mode used by Web browsers, which is usually set to UTF-8. If there is no need for special settings, there is no need to change it. This is also the element required for the HTML5 page.

XML/HTML Code copies content to the clipboard

...

This tag indicates the title of the HTML displayed in the browser window. This is a very important tag, and it is one of the main information that search engines use to include content on HTML pages.

XML/HTML Code copies content to the clipboard

...

The actual content displayed on the web page is contained between these two.

To sum up, the HTML5 page consists of the first line and parts, and is mainly divided into two parts-the header part specified by the tag and the body part specified by the tag.

In this way, we sort out the basic structure of the simplest HTML page.

Add a Canvas

Adding Canvas to HTML is very simple, just add a tag to the part of HTML! Please refer to the following code.

XML/HTML Code copies content to the clipboard

Basic HTML5 page your browser does not support canvasation! Hurry up and change it!

Since the result page is a completely blank page, I won't paste it here. You may wonder, why is it a blank? Nonsense, I haven't had time to draw yet! The original meaning of Canvas is canvas, which means canvas (nonsense...). Canvas is transparent and invisible in HTML5.

What does the text in the label 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, the text will not be displayed on the page.

What does "id" mean in that? Id is one of the attributes of the tag and is used in JavaScript code to specify a specific name, just like a person's ID number, is unique.

In order to show Canvas more clearly, and to facilitate the later demonstration, I changed the code a little bit, and the subsequent drawings will be drawn on this Canvas.

XML/HTML Code copies content to the clipboard

Basic Canvas. Your browser doesn't support it! Hurry up and change it!

Running result:

There are a few notes on the above code:

1. Added a label, will be wrapped in it, personal habits, there is no egg for the time being.

two。 The width and height attributes are specified for the tag, which specifies its width and height.

3. An inline style has been added to the tag so that it becomes a block-level element and is centered.

There is no explanation here about the content of CSS, after all, this is not the protagonist of this course, if you expand it, it will take a lot of space.

Reference Canvas element

Document object Model (DOM)

Document object Model (Document Object Model, referred to as DOM) is a standard programming interface recommended by W3C to deal with extensible markup language. The history of Document Object Model can be traced back to the "browser war" between Microsoft and Netscape in the late 1990s, when both sides endowed browsers with powerful functions on a large scale in order to compete with JScript in JavaScript. Microsoft has added a lot of exclusive things to web technology, including VBScript, ActiveX, and Microsoft's own DHTML format, so that many web pages can not be displayed normally on non-Microsoft platforms and browsers. DOM is a masterpiece brewed at that time.

The document object model represents all the objects on the HTML page. It is language neutral and platform neutral. It allows the content and style of the page to be updated again after being rendered by a Web browser. Users can access DOM through JavaScript.

Before you start using it, you need to know two specific DOM objects: window and document.

The window object, the highest level of DOM, needs to be detected to ensure that all resources and code are loaded before you start using the Canvas application.

The document object contains all the HTML tags on the HTML page. This object needs to be retrieved to find instances manipulated with JavaScript.

JavaScript placement location

Programming for Canvas with JavaScript raises a question: where do you start the JavaScript program on the created page?

It's a good idea to put JavaScript in a tag on a HTML page, and the advantage of this is that it's easy to find, as we mentioned in the previous chapter. However, putting the JavaScript program here means that the entire HTML page has to be loaded with JavaScrpit before it can run with HTML, and this JavaScript code will be executed before the entire page is loaded. As a result, you must check that the HTML page has been loaded before running the JavaScript program.

There is a recent trend to place JavaScript in front of the tag at the end of the HTML document to ensure that the entire page is loaded when JavaScript runs. However, because you need to use JavaScript to test whether the page is loaded before running the program, it is best to put JavaScript in.

But I don't go the usual way (laughter), so in the later case, I put the JavaScript code at the end 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 Code copies content to the clipboard

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

Get canvas object

Getting a canvas object is really an one-sentence thing.

JavaScript Code copies content to the clipboard

Var canvas = document.getElementById ("canvas")

Var is used for variable definition, and because JS is a weakly typed language, var is used to define any variable. Canvas after var is a variable. Use the getElementById () method of the document object to get the object through id. We gave the tag an id called canvas, so the last canvas of the sentence refers to the id--canvas. Is it a bit of a twist? you need to read it several times and sort it out by yourself. )

Get a brush (2D environment)

What do you need to paint first? Paintbrush. Getting a canvas brush is also an one-sentence thing, which is simply to use the canvas object you just obtained and call its getContext ("2d") method.

JavaScript Code copies content to the clipboard

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

The context here is the paintbrush.

The proprietary term 2D environment is used in other tutorials, and I think the brush is more vivid. Inspired by the Graphics class g brush in Java, the principle is the same.

Summary

There are only three steps to preparation:

1. Layout canvas: add canvas elements by adding tags

two。 Get the canvas: get the canvas object through the id of the tag

3. Get the brush: obtain the 2D environment through the getContext ("2d") method of the canvas object

The corresponding code is just three sentences:

JavaScript Code copies content to the clipboard

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

The complete code is as follows.

JavaScript Code copies content to the clipboard

Basic Canvas. Your browser doesn't support it! Hurry up and change it! _ window.onload = function () {var canvas = document.getElementById ("canvas"); var context = canvas.getContext ("2d");}

Note a few points:

The 1.JavaScript code needs to be wrapped in a label.

2._window.onload = function () {} is executed immediately after the page is loaded, indicating that the page loads the contents of the body of the function function that follows the execution.

After reading the above, do you have any further understanding of how to learn HTML5Canvas? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

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.