Learn HTML5 3 canvas with kingdz

Continue to update our tutorial. Haha, I personally think, what is the official HTML5 logo like Transformers.

Shenma relation ~~~~~~~~~~~

<Canvas> is a new element in HTML5. That is, you can draw images through Js.

Currently, the browser supports canvas as follows:

IE	FF	Chrome	Safari	Opera	IPhone	Android
Version 7.0 or later	Version 3.0 or later	Version 3.0 or later	Version 3.0 or later	Version 10.0 or later	Version 1.0 or later	Version 1.0 or later

IE7 and IE8 require a third-party class library javasercanvas to support ie9, FF = Firefox.

A canvas is a rectangle with no content or borders. We can control every pixel in it.

Next, we first define a canvas element.

 
 <CanvasID= "Fistcancas"Width= "300"Height= "300"> </Canvas>
 

Well, this is the most basic definition method for a canvas element.

Canvas has only two attributes, width and height. These attributes are optional and can be controlled through JS or CSS. The default value is width = 300 Height = 150.

Of course, the browser may not support it, so we will adopt the method of the first two classes.

     <  Canvas ID  = "Fistcancas"  Width  = "300"  Height  = "300"> <  IMG  SRC  = "2.png"  Width  = "300"  Height  = "300"  ALT  = "Error"> </  Canvas  > <  Canvas ID  = "Secondcancas"  Width  = "300"  Height  = "300"> Sorry, the browser does not support this label </  Canvas  > 

Okay. Let's continue. After simple creation, let's start some common operations. Of course, you can add some style sheet operations to the canvas, as shown in the following figure.

<CanvasID= "Fistcancas"Style="Border: 2px dotted red ;"Width= "100"Height= "100">This label is not supported</Canvas>
 

The canvas Initialization is blank and there is nothing to do. All we need to do is draw a picture. Of course, JavaScript is needed.

Let's get started. First, draw a square of 100*100, and the fill color is green.

 <!  Doctype  Html  > < Html  > <  Head  > <  Script  Type  = "Text/JavaScript"> Function Draw (){ VaR C = Document. getelementbyid ( "Firstcancas" ); VaR Cxt = C. getcontext ( "2D" ); Cxt. fillstyle = "#00ff00" ; Cxt. fillrect (0, 0,150,150 );} </ Script  > </  Head  > <  Body  > <  Canvas  ID  = "Firstcancas"  Width  = "100"  Height  = "100"> The browser does not support this label. </  Canvas  > <  Input Type  = "Button"  Value  = "Drawing"  Onclick  = "Draw ();"/> </  Body  > </  Html  > 

All right, this effect

Next, let's briefly describe the draw method above.

VaRCxt = C. getcontext ("2D");

To draw a picture using a script, you must first render the context (rendering context ),

It can be obtained through the getcontext method of the Canvas Element Object, and some functions that need to be called for drawing are also obtained.

Getcontext () accepts a value that describes its type as a parameter. That is, the following "2D" or "3D"

Also, please note that 2D or 3D in this area [not supported currently] must be in lower case, but it will be wrong if it is in upper case.

Cxt. fillstyle ="#00ff00"Needless to say, it must be the fill color.

PassFillstyleAndStrokestyleYou can easily set the filling and line of a rectangle.

The color value is used in the same way as CSS: hexadecimal number, RGB (), rgba (), and HSLA () (if supported by the browser, such as Firefox ).

You can use fillrect to draw a rectangle with padding.

You can use strokerect to draw a rectangle that is not filled with a border.

If you want to clear some of the canvas, you can use clearrect.

The parameters of the preceding three methods are the same:X,Y,Width,Height. The first two parameters set the coordinates (x, y), and the last two parameters set the height and width of the rectangle.

Next we will try some strange effects.

     <  Script  Type  = "Text/JavaScript"> Function Draw (){ VaR C = Document. getelementbyid ( "Firstcancas" ); VaR Cxt = C. getcontext ( "2D" ); // The Red Area and Its Coordinates Cxt. fillstyle = "RGB (240,0, 0 )" ; Cxt. fillrect (50, 50,160,160 ); // Add a gray area on the red area and set the transparency to 0.6. Cxt. fillstyle = "Rgba (100,100,100, 0.6 )" ; Cxt. fillrect (30,200,200, 30 ); // Set a green rectangle with only borders on the outermost side. Cxt. strokestyle = "#00ff00" ; Cxt. linewidth = 5; // Set the Border width to 5 // finally remove the center of the image. Cxt. strokerect (30, 30,200,200); cxt. clearrect (80, 80,100,100 );} </  Script  > 

Okay. The description is very detailed. The effect is as follows:

 

Now, this course is over. You are welcome to pay attention to it. We look forward to your suggestion. Haha, thank you.