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

This article mainly introduces "how to use the canvas element of html5". In the daily operation, I believe that many people have doubts about how to use the canvas element of html5. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts about "how to use the canvas element of html5". Next, please follow the editor to study!

The code is as follows:

He has all the attributes of the basic html tag, and you can also set style for him.

Copy the code

The code is as follows:

Canvas {width:400px;height:400px;background:#000;}

He also has a specific attribute:

Copy the code

The code is as follows:

The height and width here are different from the attribute of the previous html tags, and they are also different from the height and width in style. Here, they mainly refer to the coordinate range in canvas. The width and height in style refer to the actual size of the canvas.

For example, define the following canvas:

Copy the code

The code is as follows:

Then draw a rectangle with coordinates 100,50 and size 200,150 in canvas, and you will see the actual effect as shown below:

The size of the canvas in the figure is 600px * 450px determined by style, but the coordinates that fill the entire canvas are only 400 to 300, corresponding to the size in parentheses.

Drawing in canvas is based on coordinates, so 100,50 coordinates are converted into 150pxMagne75px screen coordinates, and the size of the rectangle is also converted from 200x150 to the screen size of 300px*225px.

You can try it yourself according to the following code:

Copy the code

The code is as follows:

Var context = document.getElementsByTagName ("canvas") [0] .getContext ("2d")

Context.fillRect (100pi 50200150)

Canvas has some other attribute, which he hasn't seen yet. He also has a main method, which is getContext (), which is to get the drawing object.

Through the dom object of canvas, you can call the method of getContext ("2d") to get the corresponding drawing object:

Var canvas = document.getElementsByTagName ("canvas") [0]

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

You can see the properties and methods of the drawing2d in the developer console:

Contains fillStyle, stokeStyle, lineCap, font and other brush style class properties, fillRect, strokeRect, beginPath, moveTo, lineTo, closePath, stroke, fill, drawImage and other drawing action methods, as well as some other transfrom, save and other methods.

Briefly talk about a few properties and methods I have seen, and others need to be explored by yourself:

FillStyle: fill pattern, which can be the html code of color value, such as red: # ff0000. We don't know whether other attributes support css3 or not.

StrokeStyle: line styl

Font: font styl

FillRect:function, which directly fills a rectangle by pressing fillStyle

StrokeRect:function, directly press strokeStyle to draw a rectangular edge.

BeginPath: start drawing lines, draw broken lines or polygons with moveTo/lineTo/closePath, etc.

MoveTo:function (xPowery) moves the start point of the drawing line to the new coordinates

LineTo:function (xPowery) the target point drawn from the current point

ClosePath: connecting from the current point to the starting point

Stroke: follow the above path to draw a broken line by strokeStyle.

Fill: draw a rectangle by fillStyle according to the above path

DrawImage: function (image,x,y,width,height) adds the Image object to the canvas. Note that the image object here must have been loaded. For example, var img = new Image (); img.src= "test.png"; img.onload = function () {/ * you can add image to the canvas * /} here

You can take a look at the method of drawing rectangles above:

Copy the code

The code is as follows:

Context.fillRect (100pi 50200150)

Draw a broken line:

Copy the code

The code is as follows:

Context.beginPath ()

Context.moveTo (10 and 10)

Context.lineTo (10110)

Context.lineTo (110110)

Context.lineTo (110 and 10)

Context.closePath ()

Context.stroke ()

Canvas has the function of drawing, but it seems to be weak in user interaction. Compare silverlight's canvas, .NET 's Bitmap, html's div and canvas:

Personally, canvas and Bitmap are more like a version that puts Bitmap on the browser side, and of course we can achieve more functions through it. Canvas itself can still achieve less, but with the existing technologies of other browser-side applications can certainly create more good applications.

At this point, the study on "how to use the canvas element of html5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.