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

This article mainly introduces the meaning of canvas in web development, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

What does canvas mean?

Canvas means "canvas" in English, but Canvas here is a new element in HTML5, on which developers can draw a series of graphics. The way Canvas is written in the HTML file is simple:

The id attribute is available to all HTML elements, and the Canvas comes with only the last two attributes (controlling width and height, respectively), and nothing else. As for compatibility, CanIUse says that the basic features are supported by 90% of browsers currently used by users, so it is safe to use in most cases.

Note that be sure to use the width and height properties that come with Canvas, and do not use CSS to control it, because CSS control can cause Canvas to deform. You can try to compare with PhptpShop, the latter is to change the "image size", the former is to change the "canvas size" correctly. For example, the following image shows the horizontal stitching of three images: the leftmost black box is the original image with the size of 50px * 50px; in the middle is the effect of changing the image size to 100px * 100px, the image becomes blurred, but the coordinate range does not increase for the image itself; the rightmost is the correct 100px * 100px Canvas.

Most of the drawing methods of Canvas have nothing to do with tags, and you need to use JavaScript to operate on them, which is called Canvas API.

We first get this element:

Var canvas = document.getElementById ('canvas')

Then use a method to get the entry where all the Canvas API can be called:

Var ctx = canvas.getContext ('2d')

Do you think excitedly that there is 3D when you see 2d? There is no 3D way to write, but if you want to open the door to the 3D world, you can write canvas.getContext ('webgl'). However, WebGL is a set of standards based on OpenGL ES 2.0, which is completely different from this article, so I won't discuss it here.

Thank you for reading this article carefully. I hope the article "what is the meaning of canvas in web development" shared by the editor will be helpful to everyone? at the same time, I also hope that you will support and pay attention to the industry information channel, and more related knowledge is waiting for you to learn!

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.