I have been thinking about what technologies I want to learn as a future technical reserve since the first year of this year. I wanted to enhance my knowledge on the underlying Android layer, but I felt that I was a little lazy if I had to study this part of my work. I am also an entry-level engineer because I have not been involved in the development of Windows Phone 7, in the future, we will not consider applying it to work choices in a short time, so we will not consider it. Now I have selected two options: IOS and HTML5. The Chairman Mao is relatively tight and has not yet purchased a MAC. So I chose HTML5 first, so I will be proficient in IOS later, as a future technical reserve.
The introduction to HTML5 and the online shopping guides of promoters skipped the materials and directly entered the topic.
Add HTML5-> canvas to the page
It is intuitive to insert a canvas element into an HTML page. Insert the canvas tag in the HTML source code:
<Canvas id = "diagonal" style = "border: 1px solid;" width = "200" height = "200"> </canvas> // canvas Element with solid border
Use a browser that supports html5.
Draw a diagonal line in the canvas
The steps are as follows:
- First, obtain the canvas object in the page element: var canvas = document. getElementById ('diagonal ');
- Get the canvas context: var context = canvas. getContext ('2d ');
- Indicates that canvas will start to draw a new image: context. beginPath ();
- Move the current position to the new target coordinate (x, y ). (Do not draw): context. moveTo (0, 0 );
- Move the current position to the new target coordinate (x, y), and draw a straight line between the two coordinates: context. lineTo );
- Call canvas to draw a graph based on the preceding instructions: context. stroke ();
According to the preceding steps, the code is:
<! DOCTYPE html>
<Html>
<Canvas id = "diagonal" style = "border: 1px solid;" width = "200" height = "200"> </canvas>
<Script>
Function drawDiagonal ()
{
Var canvas = document. getElementById ('diagonal _ line'); // obtain the canvas object
Var context = canvas. getContext ('2d '); // obtain the canvas context.
// Use absolute coordinates to create a path
Context. beginPath ();
Context. moveTo (0, 0); // move the cursor to a place where x is 0 and y is 0.
Context. lineTo (140); // draw to a place where x is and y is 70
// Draw the line to the canvas
Context. stroke (); // The image display result is drawn only when the stroke canvas is called.
}
Window. addEventListener ("load", drawDiagonal, true );
</Script>
</Html>
The effect is as follows:
<Iframe frameborder = "0" height = "220" scrolling = "no" src = "http://files.cnblogs.com/TerryBlog/line_canvas.htm" width = "300"> </iframe>
Note: beginPath, moveTo, and lineTo do not directly modify the canvas display result. In canvas, many functions used to set the style and appearance do not directly modify the display result. The result is displayed only when the storke or fill method is applied to the path. Otherwise, the canvas will be updated immediately only when the image is displayed, the wide text is displayed, or the rectangle is drawn, filled, and cleared.
Use the transform method to draw diagonal lines on the canvas
This method has three more steps than the preceding method:
First, save the current drawing status.
Use the balance method to draw the context and use the translate
After drawing, use restore to restore the original drawing status.
As to why the save and restore methods should be used, the DEMO will be explained after demonstration. The code for drawing the diagonal line using the change method is as follows:
<Script>
Function drawDiagonal ()
{
Var canvas = document. getElementById ('diagonal ');
Var context = canvas. getContext ('2d ');
// Save the current drawing status
Context. save ();
// Move the drawing context to the bottom right
Context. translate (70,140); // translation-> x indicates how many units will the coordinate origin be moved to the left and right. y indicates how many units will the coordinate origin be moved up and down.
// Draw
Context. beginPath ();
Context. moveTo (0, 0 );
Context. lineTo (70,-70 );
Context. stroke ();
// Restore the original drawing status
Context. restore ();
// The reason for using save and restore is that the status is saved before you operate the canvas. If you still need to operate the canvas, the status will not be restored. This will not affect the result we have drawn above.
}
Window. addEventListener ("load", drawDiagonal, true );
</Script>
The DEMO is as follows:
<Iframe frameborder = "0" height = "220" scrolling = "no" src = "http://files.cnblogs.com/TerryBlog/translate_canvas.htm" width = "300"> </iframe>
Considerations for using canvas save and restore
There are two scenarios:
If you can draw a graph at one time, save and restore are not used.
If you need to re-draw an image after drawing it once, after using stroke or fill, save and restore will be better and will not conflict with the next drawing, we cannot get the desired effect.
A few simple examples show how to write HTML5 and its powerful APIs. Although there is no good IDE for compiling HTML5 applications or games, but with the advent of HTML5 step by step, we are very confident in its future application.
By Terry _ Dragon
