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

This article is to share with you about the basic use of HTML5 Canvas graphics. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Canvas is part of H5 and allows scripting languages to render images dynamically. Canvas defines an area whose width and height can be defined by the html property, which can be accessed by javascript code to render dynamic graphics on a web page through a complete set of drawing functions (API).

Games: there is no doubt that games play an important role in the field of HTML5. HTML5 is more stereoscopic and more exquisite than Flash in image display based on Web.

Chart making: chart making is often ignored by people, but both internal and inter-enterprise exchanges and cooperation are inseparable from charts. Now some developers use HTML/CSS to make icons. Of course, using SVG (Scalable Vector Graphics) to complete the chart is also a very good way.

Font design: custom rendering of fonts can be based on Web and implemented using HTML5 technology.

Graph editor: Graph editor can be implemented 100% based on Web.

Other content that can be embedded in the site: such as graphics, audio, video, and many elements that can be better integrated with Web without any plug-ins.

1. Use must first set its width and height properties, specify the size of the drawable area, only specify width and height without adding styles or drawing images, the element will not be seen on the page.

2. To draw an image, we first need to take the canvas and call the getContext () method, then pass in the context name (2D/3D). There are two basic drawing operations in 2D | fillStyle | strokeStyle |, the default values of these two attributes are # 000

3. Using the toDataURL () method, you can export an image drawn on an element

4. There are three main ways to draw a rectangle. FillRect () is the rectangle fill color, strokeRect () is the rectangle stroke, and clearRect () clears the rectangle. All three methods receive four parameters x/y/w/h, the coordinates of the upper left corner of the rectangle and the width and height of the rectangle.

5. Draw a path, through which you can create complex shapes and lines. To draw a path, first call the beginPath () method, and then use the following methods to actually draw the path

6. There are two main methods to draw text, fillText () and strokeText (), both of which receive four parameters | text (text to be drawn) | x | y | maximum pixel width (optional) | both methods are based on the following three attributes

7. Transform

8. Draw an image, drawImage ()

9. Shadows and gradient

10. Using image data, you can get the original image data through getImageData (). Four parameters | x | y | w | h |. Each ImageData object has three attributes. Width/height/data,data is an array with data for each pixel stored in it. The value of each element is between 0 and 255.

Thank you for reading! This is the end of this article on "what are the basic uses of HTML5 Canvas drawing?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.