Canvas is generally a Canvas. Recently I am interested in playing games with html5, So I simply used Canvas.
Previously, Canvas was used on silverlight and wpf. On silverlight, Canvas is an absolutely positioned container, which can contain any control. We can use it to build canvases, graphic applications, and GIS applications.
In html5, canvas is a new label:
<canvas></canvas>
It has all the basic attributes of html tags. You can also set styles for it.
<canvas <canvas height="300" width="400"></canvas>
The height and width here are different from the attribute of the previous html tag, and also different from the height and width in the style. Here it mainly refers to the coordinate range in the canvas. The width and height in the style indicate the actual size of the canvas.
For example, define the following canvas:
<canvas width="400" height="300" <!doctype html>View CodeCanvas has some other attributes that have not been viewed. It also has a main method, getContext (), which is to get the Drawing Object.
You can call the getContext ("2d") method to obtain the corresponding drawing object through the dom object of canvas:
var canvas = document.getElementsByTagName("canvas")[0];var context = canvas.getContext("2d");On the developer console, you can see the attributes and methods of this drawing2d:
Includes the attributes of the fillStyle, stokeStyle, lineCap, font, and other paint style class, and the following methods are used to draw pictures, such as fillRect, strokeRect, beginPath, moveTo, lineTo, closePath, stroke, fill, and drawImage, there are some other methods such as transfrom and save.
To put it simply, I have read several attributes and methods. I need to explore other attributes and Methods myself:
FillStyle: Fill style. It can be the html code of the color value, such as red: # ff0000. Other attributes that support css3 are unknown.
StrokeStyle: Line Style
Font: font Style
FillRect: function (x, y, width, height), fill a rectangle directly by fillStyle
StrokeRect: function (x, y, width, height), draw a rectangular edge directly by strokeStyle
BeginPath: start to draw a line, and draw a line or polygon with moveTo, lineTo, closePath, etc.
MoveTo: function (x, y) moves the starting point of the draw line to the new coordinate.
LineTo: the target point drawn from the current vertex by function (x, y)
ClosePath: connects to the starting point from the current point
Stroke: draw a line by strokeStyle according to the above path
Fill: Draw a rectangle Based on fillStyle in the above path
DrawImage: function (image, x, y, width, height) adds an Image object to the canvas. Note that the image object must have been loaded. For example, var img = new Image (); img. src = "test.png"; img. onload = function () {/* Here you can add the image to the canvas */}
You can see the method for drawing a rectangle above:
context.fillRect(100,50,200,150);Draw a discount:
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 drawing function, but it seems weak in user interaction. Compare the canvas of silverlight, Bitmap of. NET, and div of html with canvas:
| Html5 canvas tag | Silverlight canvas | . NET Bitmap | Html div tag |
| Tag. You cannot add a sub-tag. | Container, you can add other containers and controls | Image File operations can be used as the source of graphic display controls |
Tags, you can add sub-tags, you can absolutely locate |
| Allows you to draw vector graphics, text, images, etc. | You can add a Path control to draw vector images and add images. | Allows you to draw vector graphics, text, images, etc. | You can add a canvas to draw vector images and add any other html tags. |
| You cannot add sub-tags. You can only use the mouse to locate user operations. | You can add various controls, use controls to locate user operations, and add other containers to implement layer control. |
User operations cannot be obtained | You can add various html tags and obtain user operations through subnodes. |
I personally think that canvas and Bitmap are more like a version that puts Bitmap on the browser. Of course, we can use it to implement more functions. Canvas itself can still be implemented less, but the technology that works with other existing browser applications will certainly be able to create more good applications.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
