Web Front-end learning notes, practice (12) Native JavaScript Drawing Graphics canvas

Graphical script:

In JavaScript, there are about five types of graphical scripts. Here, I only write, I learned two types, one is images and the other is canvas.

Images:

In the HTML structure, a label is used to display images. However, you can use the images attribute of the Document Object to operate images for graphic animation. A simple example:

     <  Div  Class  = "De"  > <  A  Href  = "#"  ID = "Dell"  > Graphics </  A  > </  Div  >      <  Div  Class  = "D"  > <  IMG  SRC  = "Img/img_01.jpg"  ALT  = "" Title  = "" Id = "de"   /> </  Div  > 

In this example, we may have a lot of images. If there are two images that are displayed by swiping the Mouse, what should we do? In fact, there are many solutions. First, when learning to operate Dom, we will learn a native method se for modifying attributes.Tattribute(), One is to operate through the images attribute. The following is an example:

 Function  De (){  VaR A = Document. getelementbyid ("Dell" ); A. onmouseover = Function  (){  VaR IMG = Document. Images [0 ]; IMG. SRC = "Img/img_02.jpg" ;} A. onmouseout = Function  (){  VaR IMG = Document. Images [0 ]; IMG. SRC = "Img/img_01.jpg" ;} Window. onload = Function  () {De ();} 

Through images [0], we can obtain the first IMG tag, which achieves our goal.

FunctionDe (){VaRA = Document. getelementbyid ("Dell");VaRB = Document. getelementbyid ("de"); A. onmouseover=Function() {B. setattribute ("Src", "img/img_02.jpg");} A. onmouseout=Function() {B. setattribute ("Src", "img/img_01.jpg") ;}} Window. onload=Function() {De ();}
 

Use the setattribute () method.

IMG operations are just some simple animations. What if more complicated animations are needed? Then we need to learn canvas labels.

Canvas:

The canvas tag has long been supported in the Firefox browser. How can we use it? <Canvas id = "de" width = "100" Height = "100"> </canvas>: Creates a canvas with a width of 100 pixels. Therefore, we can draw on it.

Before starting painting, we also need to first obtain the drawing environment, and use the getcontext () method to pass in a "2D" parameter, indicating that it is to draw a 2D drawing environment. Of course, we still need to perform a function test before we can start to draw it.

 
VaRCanvas = Document. getelementbyid ("de");If(Canvas. getcontext ){VaRContext = canvas. getcontext ("2D");}
 

Next, we need to learn three methods: fillrect () strokerect () clearrect (). They receive four parameters: X axis, Y axis, width, and height. Suppose we need to draw a picture with a width of 50 and a color of # CCC, how should we draw it? Example:

VaRCanvas = Document. getelementbyid ("de");If(Canvas. getcontext ){VaRContext = canvas. getcontext ("2D"); Context. fillstyle= "# CCC"; Context. fillrect (0, 0, 50, 50);}
 

Note: fillrect draws filled rectangles. To draw overlapping images, you only need to set the Y x axis coordinates.

VaRCanvas = Document. getelementbyid ("de");If(Canvas. getcontext ){VaRContext = canvas. getcontext ("2D"); Context. strokestyle= "# CCC"; Context. strokerect (0, 0, 50, 50);}
 

Note: strokerect draws a border rectangle. To draw overlapping images, you also need to set the Y x axis coordinates.

VaRCanvas = Document. getelementbyid ("de");If(Canvas. getcontext ){VaRContext = canvas. getcontext ("2D"); Context. fillstyle= "# CCC"; Context. fillrect (0, 0, 50, 50); Context. fillstyle= "#933"; Context. fillrect (15, 15, 50, 50); Context. clearrect (30, 30, 10, 10);}
 

Note: clearrect () is part of the canvas area, expressed by coordinates and width and height.

What if we need to draw some complex images? We need to use some methods to draw paths. The first step is to create a new path and call beginpach () to start creating a new path. Therefore, we also need to learn some ways to draw paths.

ARC ()

Arcto ()

Beziercurveto ()

Lineto ()

MoveTo ()

Quadraticcurveto ()

Rect ()

Below is an example:

 VaR Canvas = Document. getelementbyid ("de" );  If  (Canvas. getcontext ){  VaR Context = canvas. getcontext ("2D" );  //  Create a new path  Context. beginpach ();  //  Draw circles Context. ARC (100,100, 2 * Math. Pi, False );  //  There are six parameters for Arc. 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 excircle Context. moveTo (194,100 );  //  It means moving the cursor to the coordinate of 194 100 without drawing a line. Context. ARC (100,100, 2 * Math. Pi, False  );  //  Drawing hour hands Context. moveTo (100,100); Context. lineto ( 100,15 );  //  Move from the last point to the 100 15 coordinate and draw a straight line  //  Path stroke  Context. Stroke ();}  //  After creating a path, you can also use some methods, such as closepath () Fill () stroke ()  //  Clip (), in fill () and stroke (), you can also use fillstyle () and strokestyle () to fill in the color. 

After drawing a 2D image, we will find that the image is just a simple image with no text or numbers, so we still need to learn two other ways to draw the text: filltext () stroketext ()

Both of them receive four parameters, the string to be drawn, x, y, and pixel width. There are three ways to draw text: font textalign textbaseline. For example:

VaR Canvas = Document. getelementbyid ("de" );  If  (Canvas. getcontext ){  VaR Context = canvas. getcontext ("2D" );  //  This setting is the same as setting the font in CSS, such as the size, Font, and format. Context. font = "10px" ;  //  Sets how to align text, which is the same as the text-align attribute in CSS. Context. textalign = "center" ;  // Set the baseline of the text, which is the same as the background: Top; in CSS. Context. textbaseline = "TOP" ;  //  The string to be drawn is 12, and the coordinate is the position of x100 y80. Context. filltext ("12", 100,80 );} 

In the canvas, there is another interesting thing, transform. Similarly, when learning changes, you also need to learn several methods: Rotate () Scale () Translate () transform () settransform ()

If we want it to work, we can use the rotate () method with parameters. Or scale the image, scale (), with parameters. Use an example to describe these methods:

 VaR Canvas = Document. getelementbyid ("de" );  If  (Canvas. getcontext ){  VaR Context = canvas. getcontext ("2D" );  //  Rotating Context. Translate (100,100 );  //  Move the origin coordinates to the 100 100 coordinates.  //  Rotate radians Context. Rotate (1 );  //  Rotate in 1 radians  //  Save status Context. fillstyle = "# CCC" ; Context. Translate ( 100,100); Context. Save ();  //  After the SAVE () method is called, this state is saved.  //  Return status  Context. Restore ();} 

Of course, you can also use images in addition to painting the entire canvas. The method is drawimage ().

All of the above are the basic things you learned, but only by combining these basic methods with CSS, you can develop a variety of front-end interaction effects. For more information, see W3C.