HTML5-Canvas labels use instance 1

Recently I was obsessed with HTML5, although HTML5 is rarely used in the current project (the reason is that we have to consider the compatibility of IE 6, 7, and 8 browsers ). The content here is purely personal interest.
1. What is a Canvas label? What is the purpose of the Canvas label?

There are too many conceptual explanations here, so I will not write more. You can simply find out more here by Baidu and Google. Canvas is an API label added in HTML5.

<Canvas> labels define images, such as tables and other images.

<Canvas> labels are only graphical containers. You must use scripts to draw images.

2. How to Use the Canvas API to draw a square and add a diagonal line?

1. First, set a Canvas label in HTML, and set its Height, Width, and Border attributes. The Code is as follows:

 
<! -- Canvas target -->
<Canvas id = "diagonal" height = "200px" width = "200px" style = "border: 1px solid #000000;">
</Canvas>
2. Draw images in the Canvas area with JS
 
Function drawDiagonal (){
// Obtain the canvas Element and Its Drawing Context
Var canvasObj = document. getElementById ("diagonal ");
Var context = canvasObj. getContext ("2d ");
// Use absolute coordinates to create a path
// Draw two diagonal lines
Context. beginPath ();
// Move the vertex to the origin
Context. moveTo (0, 0 );
// Dashes to the bottom right corner
Context. lineTo (200,200 );
// Draw the line to the canvas
Context. stroke ();
 
// Move the vertex to the bottom right corner
Context. moveTo (0,200 );
// Dashes to www.2cto.com in the upper right corner.
Context. lineTo (200, 0 );
// Draw the line to the canvas
Context. stroke ();
}
// Execute the drawing program during page Import
Window. addEventListener ("load", drawDiagonal, true );

3. After running the page

From the aganar Column