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

This article introduces the knowledge of "how to understand the use of canvas elements in html5". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Canvas generally refers to canvas. Recently, I am interested in writing games in html5, so I simply use Canvas.

I have used Canvas on silverlight and wpf before. On silverlight, Canvas is an absolute positioning container in which any control can be placed. We can use it to build canvas, graphics applications, GIS applications and so on.

In html5, canvas is a new tag:

The code is as follows:

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

The code is as follows:

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

He also has a specific attribute:

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:

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:

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 and 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:

The code is as follows:

Context.fillRect (100pi 50200150)

Draw a broken line:

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.

That's all for "how to understand the use of canvas elements in html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.