Comments: HTML5 canvas elements use JavaScript to draw images on webpages. A canvas is a rectangular area that allows you to control each pixel. Canvas has multiple ways to draw paths, rectangles, circles, characters, and add images.
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:
The Code is as follows:
<Canvas> </canvas>
It has all the basic attributes of html tags. You can also set styles for it.
The Code is as follows:
<Canvas style = "width: 400px; height: 300px;"> </canvas>
<Style>
Canvas {width: 400px; height: 400px; background: #000 ;}
</Style>
<Canvas> </canvas>
It also has a specific attribute:
The Code is as follows:
<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:
The Code is as follows:
<Canvas width = "400" height = "300" style = "width: 600px; height: pixel PX; border: 1px solid #000;"> </canvas>
Then, draw a rectangle with coordinates 100, 50, 200, and 150 in the canvas. The actual results are as follows:
In the figure, the size of the canvas is determined by the style 600px * pixel PX, but the coordinates of the entire canvas are only 400*300, corresponding to the size in the brackets.
Drawing in canvas is based on coordinates, so the coordinates of 100 and 50 are converted into screen coordinates of 150px and 75px, the size of the rectangle is also converted from 200*150 to the screen size of 300px * 225px.
You can try the following code:
The Code is as follows:
<! Doctype html>
<Html> </p> <body>
<Canvas width = "400" height = "300" style = "width: 600px; height: pixel PX; border: 1px solid #000;"> </canvas>
<Script>
Var context = document. getElementsByTagName ("canvas") [0]. getContext ("2d ");
Context. fillRect (200,150, 50 );
</Script>
</Body>
</Html>
Canvas 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:
The Code is as follows:
Context. fillRect (200,150, 50 );
Draw a line:
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 drawing function, but it seems weak in user interaction. Compare the canvas of silverlight, Bitmap of. NET, and div of html with canvas:
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
