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

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:

<script><br />var context =document.getElementsByTagName("canvas")[0].getContext("2d");<br />context.fillRect(100,50,200,150);<br /></ script><br /><br /><br /></script>

Canvas has some other attributes, but I haven’t looked at them yet. It also has a main method, which is getContext(). This method is to get the drawing object.

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

var canvas = document.getElementsByTagName("canvas")[0];
var context = canvas.getContext("2d");
You can see the properties and properties of this drawing2d in the developer console Method:

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

Let me briefly talk about a few attributes and methods that I have seen. Others need to be explored by yourself:

fillStyle: fill style, which can be the HTML code of the color value, such as red: #ff0000, I don’t know if other attributes of CSS3 are supported

strokeStyle: line style

font: font style

fillRect: function(x,y,width,height), fill a rectangle directly according to fillStyle

strokeRect: function (x, y, width, height), directly press strokeStyle to draw a rectangular side

beginPath: Start drawing lines, and use moveTolineToclosePath, etc. to draw polylines or polygons

moveTo: function(x,y) moves the starting point of the line to the new coordinates

lineTo:function(x,y) draws the target point from the current point

closePath: connect from the current point to the starting point

stroke: Draw a polyline according to strokeStyle according to the above path

fill: Draw a rectangle according to fillStyle according to the path above

drawImage: function(image,x,y,width,height) adds the Image object to the canvas. Note that the image object here must have been loaded. Such as var img = new Image();img.src="test.png";img.onload = function(){/*The image can be added to the canvas here*/}

You can look at the method of drawing a rectangle above:

Copy the code

The code is as follows:

context.fillRect(100,50,200,150);

Draw a polyline:

Copy the code

The code is as follows:

context. beginPath();
context.moveTo(10,10);
context.lineTo(10,110);
context.lineTo(110,110);
context.lineTo(110,10);
context.closePath();
context.stroke();

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

Personally, I feel that canvas is more similar to Bitmap. It is a version that puts Bitmap on the browser side. Of course, we can use it to achieve more functions. There are still relatively few things that canvas itself can achieve, but by combining it with other existing browser-side application technologies, we can definitely create more good applications.