Shulou(Shulou.com)05/31 Report--

This article mainly explains "how to add a Canvas tag in the HTML page", the content of the article is simple and clear, easy to learn and understand, the following please follow the editor's ideas slowly in-depth, together to study and learn "how to add a Canvas tag in the HTML page"!

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

The code is as follows:

Your browser does not support HTML5 Canvas.

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

The code is as follows:

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:

The code is as follows:

Var theCanvas = document.getElementById ("canvasOne")

Thank you for your reading, the above is the content of "how to add a Canvas tag in the HTML page", after the study of this article, I believe you have a deeper understanding of how to add a Canvas tag to the HTML page, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.