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

This article mainly introduces how to add Canvas tags to the HTML page, the article is very detailed, has a certain reference value, interested friends must read it!

In the HTML page, you can add tags with code like this:

Your browser does not support HTML5 Canvas.

Translation note: for canvas, the following words are not allowed:

Let's take a look at what the above code does. Tags have three main attributes, including:

1.id . We can reference the tag with the id value in the JavaScript code. In the above code, the id value is canvasOne.

2.width . The width of the canvas, in pixels. In the above code, the width value is 500 pixels.

3.height . The height of the canvas, in pixels. In the above code, the height value is 300 pixels.

We can place any piece of text between the opening and closing tags of the Canvas; when the browser that opens the HTML page does not support Canvas, the text will be displayed where the Canvas tag is. In the above code, the text we use is "Your browser does not support HTML5 Canvas."

Using document objects to reference canvas elements in JavaScript

When the HTML page is loaded, the document object refers to all the elements in the page, so we can use DOM to refer to what is defined in the above code.

We need a reference to the Canvas object so that we know where to display the painting with the Canvas interface.

First, we define a variable named theCanvas to hold the reference to the Canvas object.

Then, we call the getElementById () function of the document object and set the passed parameter to canvasOne (the id of the tag in the HTML page) to get the Canvas object:

Var theCanvas = document.getElementById ("canvasOne")

The above is all the content of the article "how to add Canvas tags in the HTML page". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to 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.