Three canvases canvas with Kingdz learning HTML5

Continue to update our tutorial, haha, personally feel, this HTML5 official LOGO how to see, how like transformers.

~~~~~~~~~~~ Relationship between God and horse

<Canvas> is an emerging element in HTML5. It is possible to draw a graph by JS.

The current browser support for Canvas is as follows

Ie	Ff	Chrome	Safari	Opera	Iphone	Android
version 7.0 or higher	Version 3.0 or higher	Version 3.0 or higher	Version 3.0 or higher	Version 10.0 or higher	Version 1.0 or higher	Version 1.0 or higher

IE7 and IE8 require a third-party class library Explorercanvas support IE9 not required, Ff===firefox.

A canvas is a rectangular area with no content and no borders. We can control every pixel inside.

Here we first define a canvas element

<canvas id= "Fistcancas" width= "height=" ></canvas>

Well, this is the most basic way to define a canvas element.

Canvas has only two properties, width and height, and these properties are optional and can be controlled by JS or CSS. The default value is width=300 height=150

Of course the browser is not supported, so we'll take the first two lessons

    <canvas id= "Fistcancas" width= "" "height=" >     </canvas>    <canvas id= "Secondcancas" width= "height=" >        Sorry, the browser does not support this tag    < /canvas>

All right, let's go on. Once the simple creation is complete, let's start with some of our regular operations. Of course, you can add some style sheets to the canvas, such as the following graphic.

    <canvas id= "Fistcancas" style= "border:2px dotted red;" width= "height=" >        does not support this label    </canvas >

The initialization of the canvas is blank, nothing drops, we have to do is to draw, of course, this need JS.

All right, let's go, first of all, one of the simplest, draw a 100*100 square, fill the color green.

<! DOCTYPE html>
Well, the effect of this
Below, a simple description of the draw method above
var cxt = C.getcontext ("2d");
Using script paint first requires a render context (rendering contexts),
It can be obtained through the GetContext method of the canvas element object, and there are some functions that the drawing needs to call.
GetContext () accepts a value that describes its type as a parameter. "2d" or "3d" in the back.
Also, please note that this place 2d or 3d[currently does not support] must be lowercase, uppercase but it will happen wrong OH
Cxt.fillstyle = "#00ff00"; Needless to say, it must be a fill color.
You  fillStyle  can  strokeStyle  easily set the fill and line of a rectangle by using the and properties.
Color values are used in the same way as CSS: hexadecimal number, RGB (), Rgba (), and Hsla () (if browser support, such as Firefox).
A filled rectangle can be drawn with FillRect .
You can use Strokerect to draw rectangles that have only borders that are not filled .
If you want to clear some canvases, you can use Clearrect.
The parameters of the above three methods are the same:,,, x y width height . The first two parameters set (x, y) coordinates, and the last two parameters set the height and width of the rectangle.
Below we try to do some strange effects on the device.
    <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 (a);            Add a gray area above the red area and set the transparency to 0.6            Cxt.fillstyle = "Rgba (+, +, 0.6)";            Cxt.fillrect (+, ();            Set at the outermost there is a green rectangle with only the border            Cxt.strokestyle = "#00ff00";            Cxt.linewidth = 5;   Set the width of the border to 5            //finally remove the center of the graphic.            Cxt.strokerect (+, ();            Cxt.clearrect (+, +, +);        } </script>
Well, the explanation is very detailed, the effect is as follows
Well, this course is over, welcome to pay attention to me, look forward to your recommendation, haha, thank you.
Three canvases canvas with Kingdz learning HTML5