Learn HTML5 13 HTML5 color selector from kingdz

This lesson shows you two examples. Of course, they are very simple.

The first effect is the color selector. The effect is as follows:

I think many people have done this in other versions. By the way, this is a simple implementation in HTML5.

The first thing to do is to prepare for the job.

   <  Canvas  ID  = "Text"  Width  = "100"  Height  = "100"> </  Canvas  > <  P  > Red: <  Input Type  = "Range"  ID  = "Red"  Min  = "0"  Max  = "255"  Value  = "0"  Onchange  = "Fill ();"/> </  P  > <  P  > Green: <  Input Type  = "Range"  ID  = "Green"  Min  = "0"  Max  = "255"  Value  = "0"  Onchange  = "Fill ();"/> </  P  > <  P  > Blue: <  Input Type  = "Range"  ID  = "Blue"  Min  = "0"  Max  = "255"  Value  = "0"  Onchange  = "Fill ();"/> </  P  > Current color: <  Span  ID  = "Showcolor"> </ Span  > 

This time we use the range slider to achieve the desired effect.

 <  Script  Type  = "Text/JavaScript"> VaR C = Document. getelementbyid ( "Text" ); VaR CTX = C. getcontext ( "2D" ); VaR Red = Document. getelementbyid ( "Red" ); VaR Green = Document. getelementbyid ("Green" ); VaR Blue = Document. getelementbyid ( "Blue" ); Function Fill () {CTX. fillstyle = "RGB (" + Red. Value + "," + Green. Value + "," + Blue. Value + ")" ; Document. getelementbyid ( "Showcolor" ). Innerhtml = CTX. fillstyle; CTX. fillrect (0, 0,100,100 );} </  Script > 

SeeCode? Haha, it's very simple. You can see it at a Glance. (* ^__ ^ *) Hey ......

The second example is the color belt effect, which is a random color display effect. Well, you should pay attention to these things that may be used in the future.

  <  Canvas  ID  = "Text"  Width  = "400"  Height  = "400"> This label is not supported </  Canvas  > <  Input  Type = "Button"  Value  = "Start running"  Onclick  = "Setinterval (move, 1);"/> <  Script  Type  = "Text/JavaScript"> VaR C = Document. getelementbyid ( "Text" ); VaR CTX = C. getcontext ( "2D" ); VaR Width = parseint (C. getattribute ( "Width" ));VaR Height = parseint (C. getattribute ( "Height" )); VaR Imagedata = CTX. createimagedata (width, height ); Function Move (){ VaR X = 200; For ( VaR Y = 0; y  "RGB (" + Parseint (math. Random () * 256) + "," + Parseint (math. Random () * 256) + "," + Parseint (math. Random () * 256) +")" ); CTX. fillrect (X, Y, 50, 50 );};} </  Script  > 

These two examples are not very difficult. They mainly involve a small test of your familiarity. I will give you some interesting results in future courses. Today's simple course is over.