Home >Web Front-end >H5 Tutorial >Introduction to how to use the canvas element of html5 (drawing rectangles, polylines, circles)_html5 tutorial skills

Introduction to how to use the canvas element of html5 (drawing rectangles, polylines, circles)_html5 tutorial skills

WBOYOriginal: 2016-05-16 15:48:021344browse

Canvas generally refers to canvas. Recently, I have become more interested in using HTML5 to write games, so I simply used Canvas.

I have used Canvas in silverlight and wpf before. In silverlight, Canvas is an absolutely positioned container, and any control can be placed inside it. We can build canvas, graphics applications, GIS applications, etc. through him.

In HTML5, canvas is a new tag:

Copy the code

The code is as follows:

It has all the attributes of the basic html tag, and you can also set styles for it.

Copy code

The code is as follows:

He also has a specific attribute:

Copy code

The code is as follows:

The height and width here are the same as before The attributes of the html tag are different, and they are also different from the height and width in style. This mainly refers to the coordinate range in the canvas. The width and height in style refer to the actual display size of the canvas.

For example, define the following canvas:

Copy the code

The code is as follows:

Then Draw a rectangle in canvas with coordinates of 100 and 50 and sizes of 200 and 150. You will see the actual effect as shown below:

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

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

You can try it yourself by following the code below:

Copy code

The code is as follows: