HTML5 canvas API

I think it is better to learn a new technology and record it while learning it. In the future, I will read HTML5ProgramDesign records.

First, let's see if our browser supports HTML5? If not, upgrade it now!

CodeAs follows:

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  <  Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head  >     <  Title  > </  Title  >      <  Script  Type  = "Text/JavaScript"  >  Window. onload  =   Function  (){ Try  {Document. createelement (  "  Canvas  "  ). Getcontext (  "  2d  " ); // This step is to create a canvas element and draw a 2D image on it.
// The purpose of this step is to execute the following code if your browser supports html5. a prompt that supports html5, otherwise, an error occurs when the catch code is executed. Understand it!
Document. getelementbyid (  "  Support  "  ). Innerhtml  =   "  Your browser supports HTML5.  " ;}  Catch  (E) {document. getelementbyid (  "  Support  "  ). Innerhtml  =   "  Your browser does not support HTML5. Please upgrade it!  " ;}}  </  Script  >  </  Head  >  <  Body  >      <  Div  ID  = "Support"  > </  Div  > </  Body  >  </  Html  > 

Because I upgraded to ie9, and ie9 is supported, the effect is as follows:

If your browser is a browser earlier than ie9, you can copy the above Code to see what it shows.

Next we will add a canvas element on the page, and we can see that it can also use CSS to control the style.

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  <  Html  Xmlns = "Http://www.w3.org/1999/xhtml"  >  <  Head  >      <  Title  > </  Title  >      <  Style  Type  = "Text/CSS"  >  # Diagonal {  Border  :  1px solid red  ;  Width  :  200px  ;  Height  : 200px  ;          }      </  Style  >  </  Head  >  <  Body  >      <  Canvas  ID  = "Diagonal" >      </  Canvas  >  </  Body  >  </  Html  > 

Let's draw a diagonal line.

 <!  Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"  >  < Html  Xmlns  = "Http://www.w3.org/1999/xhtml"  >  <  Head  >      <  Title  > </  Title  >      <  Style  Type  = "Text/CSS"  > # Diagonal  {  Border  :  1px solid red  ;  Width  :  200px  ;  Height :  200px  ;          }      </  Style  >      <  Script  Type  = "Text/JavaScript"  >          Function  Drawdiagonal (){ //  Get the Canvas Element and Its Drawing Context              VaR  Canvas  =  Document. getelementbyid (  "  Diagonal  "  );  VaR Context  =  Canvas. getcontext (  "  2d  "  ); // Input "2D" to obtain the two-dimensional context. I heard that the 3D API has been completed,
// Pass in "webgl" to obtain the three-dimensional context. However, I tried it in ie9 and the result context is null. It seems that ie9 does not support the webgl specification.  //  Use absolute coordinates to create a path  Context. beginpath (); context. moveTo ( 70  ,  140  ); Context. lineto (  140  ,  70  );  //  Draw the line to the canvas. Context. Stroke ();} window. addeventlistener (  "  Load  "  , Drawdiagonal,  True  );  </  Script  >  </  Head  > <  Body  >      <  Canvas  ID  = "Diagonal"  >      </  Canvas  >  </  Body  >  </  Html  > 

Three methods are called: beginpath, moveTo, and lineto. The coordinates of the start and end points of the line are uploaded. I believe everyone knows that the origin (0, 0) is in the upper left corner.
The moveTo and lineto methods do not actually draw a line, but call the stroke method to draw a line. The effect is as follows:

After this article, I felt that it was not correct. I tried to draw two points (70,140) () with the attachment, for example, if you do not understand it, draw it yourself!

As with the previous operations on the context (if moveTo, lineto, beginpath, and the function that sets the style and appearance), it will not be displayed directly on the page, only when the stroke or fill method is applied to the path will the results of those operations be displayed.