Drawing a canvas using JavaScript

HTML5 canvas 2D API Specification 1.0 Chinese version:

Http://wenku.baidu.com/view/d841013d0912a2161479292d.html

 

<Canvas id = "test"> </canvas>

Start by learning three methods: fillrect () strokerect () clearrect (). They receive four parameters: X axis, Y axis, width, and height..

<SCRIPT type = "text/JavaScript">

VaR canvas = Document. getelementbyid ("test ");

If (canvas. getcontext ){

VaR context = canvas. getcontext ("2D ");//Draw a 2D drawing environment

Context. fillstyle = "# CCC ";// The color is # CCC Image

Context. fillrect (0, 0, 50, 50 );// FillrectDraw a wide and high50Filled rectangle

Context. strokerect (0, 0, 50, 50 );//Strokerect draws a border rectangle.

 Context. clearrect (30, 30, 10, 10 );//Clearrect () is part of clearing the canvas area

}

</SCRIPT>

 

Next example:

<SCRIPT type = "text/JavaScript">

VaR canvas = Document. getelementbyid ("test ");

If (canvas. getcontext) {var context = canvas. getcontext ("2D"); // create context. beginpath () in the new path ();

 

// This setting is the same as setting the font in CSS, including the font size, Font, and format. font = "12px "; // sets how the text is aligned, which is the same as the text-align attribute in CSS. textalign = "center"; // set the text baseline, which is the same as the background: Top; Context in CSS. textbaseline = "TOP"; // the string to be drawn is 12, and the coordinate is the position of x100 y80.

Context. filltext ("hour clock );

// Draw the circle context. ARC (100,100, 2 * Math. pi, false); // arc has six parameters. XY is the arc that draws the center point at 100 100, and then the radius is 99. // The angle is between 0 and 2 * Math. Pi, which is counter-clockwise. // Draw the outer circle context. moveTo (194,100); // It means to move the cursor to the coordinate of 194 100, but not draw a line. Context. ARC (100,100, 2 * Math. pi, false); // draw the context of the hour. VPC: moveTo (100,100); context. lineto (100); // move from the last point to the coordinate of 15, and draw a straight line // path stroke context. stroke ();

}

</SCRIPT>

 

Next example:

<SCRIPT type = "text/JavaScript">

VaR canvas = Document. getelementbyid ("test ");

 

If (canvas. getcontext) {var context = canvas. getcontext ("2D"); // rotate the context. translate (100,100); // move the origin coordinate to the 100 100 coordinate. // Rotate the radian context. rotate (1); // starts to rotate in radians of 1 // save the state context. fillstyle = "# CCC"; context. translate (100,100); context. save (); // After the SAVE () method is called, this state is saved. // Return status context. Restore ();}

</SCRIPT>