Javascript linear gradient 1

The ability of JavaScript to process images is actually not weak, but it is a pity that the browser war has been exhausted. This is not enough. Adobe's acquisition of Macromedia makes SVG much easier. As a newbie, Apple brings us the canvas label. Canvas was first introduced in dashboard of Mac OS X, and then supported by Apple's Safari browser. Then it became the HTML5 standard and supported by standard browsers other than the IE kernel. Apple does more than that. It thinks SVG is too heavy, so it attribute all the filter tags in SVG (SVG filters have more filters than IE filters, and more comprehensive functions ). Firefox quickly developed a set of private attributes, but changed the prefix from-WebKit-to-moz. Opera's reaction was sluggish. It should be said that it was very dissatisfied in private, because Opera's CTO was the inventor of CSS, Hakon Wium lie, who did not like what others did for themselves. Therefore, it is difficult for me to implement linear gradient. ie needs to use the IE filter. Firefox has some problems in creating SVG dynamically and needs to use the CSS private attribute with its-moz-prefix, safari and chrome require CSS private attributes prefixed with-WebKit-, and Opera requires SVG. Let's make breakthroughs one by one.

Ie uses the DXImageTransform. Microsoft. Gradient filter (it doesn't matter if the first letter of the last gradient is uppercase or lowercase ).

Attribute	Description
Enabled	Whether to enable the filter. The default value is true.
Gradienttype	Whether it is a vertical gradient or a horizontal gradient. The default value is 0 (vertical gradient), and 1 is a horizontal gradient.
Startcolorstr	Start color, which can accept an 8-digit hex color value, from # ff000000 to # ffffffff. The default value is blue # ff0000f; or use the red, green, and other color values f.
Endcolorstr	End color, which can accept an 8-digit hex color value from # ff000000 to # ffffffff. The default value is black # ff000000.
Startcolor	The function is the same as startcolorstr. It accepts an overall color value ranging from 0 to 4294967295. No default value exists.
Endcolor	The function is the same as endcolorstr, and an overall color value ranging from 0 to 4294967295 is accepted. No default value exists.

For more details, click here

<Br/> <! Doctype HTML> <br/> <title> JavaScript linear gradient by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei"/> <br/> <meta name = "Description" content = "javascript linear gradient by situ zhengmei"/> <br/> <style type = "text/CSS"> <br/> # gradient {<br/> height: 120px; <br/> color: Navy; <br/> filter: progid: DXImageTransform. microsoft. gradient (Enabled = 'false', gradienttype = 1, startcolorstr = # Ffff0000, endcolorstr = #00 ffffff ); <br/>}< br/> </style> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> window. onload = function () {<br/> var DIV = document. getelementbyid ("gradient"), <br/> button = document. getelementbyid ("toggle"), <br/> filter = div. filters [0]; <br/> // because it applies only to one filter. It can also be seen that filters exists as an attribute of the element object. <br/> // This attribute is a set, it contains static CSS defined filters and dynamically added filters. <Br/> // if there are more than one filter, use the following method to obtain the corresponding filter object <br/> // filter = div. filters ["DXImageTransform. microsoft. gradient "] <br/> filter = div. filters. item ("DXImageTransform. microsoft. gradient ") <br/> button. onclick = function () {<br/> If (filter. enabled) {<br/> filter. enabled = "false"; <br/> Div. style. color = "Navy"; <br/> button. innerhtml = "enable filter"; <br/>} else {<br/> filter. enabled = "true"; <br/> Div. style. color = "#000"; <br/> button. innerhtml = "Disable filter "; <br/>}< br/> </SCRIPT> <br/> <Div id = "gradient"> JavaScript linear gradient by situ zhengmei </div> <br/> <button type = "button" id = "toggle"> enable ie filter </button> <br/>

RunCode

Next, let's talk about the implementation of SVG linear gradient, because the relevant CSS private attributes are derived from this. As there is no space for uploading SVG, I can only dynamically generate SVG. For me, it is best to achieve dynamic implementation, at least to reduce the number of requests, less to write much greater than the number ...... The following is static implementation. How to add HTML to Google.

Lineargradient has the following attributes: x1, x2, Y1, and Y2, which can help us achieve horizontal or vertical gradient. We can regard x1, x2, Y2, and Y2 as the coordinates of the two points of the color gradient.

• When Y1 is equal to Y2 and X1 is not equal to X2, horizontal gradient is achieved.
• When X1 is equal to X2 and Y1 is not equal to Y2, the vertical gradient is implemented.
• If Y1 is not equal to Y2 and X1 is not equal to X2, the angle gradient is implemented.

 
   
   
   
   
     JavaScript linear gradient (horizontal) by situ zhengmei 
    
    
     
      
      
     
    
    
   

<Br/> <! Doctype HTML> <br/> <title> svg by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name =" keywords "content =" javascript dynamic creation of SVG "/> <br/> <meta name =" Description "content =" javascript dynamic creation of SVG "/> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <SCRIPT type = "text/JavaScript"> </P> <p> (function () {<br/> If (! Window. SVG) {<br/> window. SVG ={}; <br/>}< br/> var SVG = Window. SVG ={< br/> Create: function (name) {<br/> This. node = document. createelementns ("http://www.w3.org/2000/svg", name); <br/> return this; <br/>}, <br/> appendto: function (parent) {<br/> If (typeof this. node! = "Undefined" & parent. nodetype = 1) {<br/> parent. appendchild (this. node); <br/>}< br/> return this; <br/>}, <br/> ATTR: function (BAG) {<br/> for (var I in bag) {<br/> If (bag. hasownproperty (I) {<br/> This. node. setattributens (null, I, bag [I]) <br/>}< br/> return this; <br/>}, <br/> HTML: function (text) {<br/> If (text. nodetype = 3) {<br/> This. node. appendchild (document. createtextnode (text); <br/>}< br/> return this; <br/>}< br/> })() <br/> window. onload = function () {<br/> var root = SVG. create ("SVG "). ATTR ({width: "800px", height: "400px "}). appendto (document. body ). node; <br/> SVG. create ("DESC" ).html ("javascript linear gradient by situ zhengmei "). appendto (Root); <br/> var defs = SVG. create ("defs "). appendto (Root ). node; <br/> // defines a linear gradient <br/> var lineargradient = SVG. create ("lineargradient "). ATTR ({ID: "gradient", X1: "0%", Y1: "0%", X2: "100%", Y2: "0% "}). appendto (defs ). node; <br/> SVG. create ("stop "). ATTR ({offset: "20%", "stop-color": "red "}). appendto (lineargradient) <br/> SVG. create ("stop "). ATTR ({offset: "80%", "stop-color": "yellow "}). appendto (lineargradient) <br/> SVG. create ("ellipse "). ATTR ({cx: "200", Cy: "190", RX: "85", Ry: "55", fill: "URL (# gradient )"}). appendto (Root) <br/>}< br/> </SCRIPT> <br/> <p> JavaScript linear gradient (horizontal) by situ zhengmei </p> <br/>

Run code

Dynamic implementation, but the Firefox is dumpfounded. It can be seen that Firefox is also idle in SVG.

 
<? XML version = "1.0" standalone = "no"?> <! Doctype SVG public "-// W3C // dtd svg 1.1 // en" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <SVG width = "800px" Height = "400px" version = "1.1" xmlns = "http://www.w3.org/2000/svg"> <DESC> JavaScript linear gradient (vertical) by situ zhengmei </DESC> <defs> <lineargradient id = "gradient" X1 = "0%" Y1 = "0%" X2 = "0%" y2 = "100%"> <stop offset = "0%" stop-color = "#008000" stop-Opacity = "1"/> <Stop offset = "80%" stop-color = "# a9ea00" stop-Opacity = "0"/> </lineargradient> </defs> <polygon id = "S1" points = "60, 0 180,120, 0 120,180 60,180 0,120" fill = "URL (# gradient) "/> </SVG>
 

<Br/> <! Doctype HTML> <br/> <title> svg by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name =" keywords "content =" javascript dynamic creation of SVG "/> <br/> <meta name =" Description "content =" javascript dynamic creation of SVG "/> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <SCRIPT type = "text/JavaScript"> <br/> (function () {<br/> If (! Window. SVG) {<br/> window. SVG ={}; <br/>}< br/> var SVG = Window. SVG ={< br/> Create: function (name) {<br/> This. node = document. createelementns ("http://www.w3.org/2000/svg", name); <br/> return this; <br/>}, <br/> appendto: function (parent) {<br/> If (typeof this. node! = "Undefined" & parent. nodetype = 1) {<br/> parent. appendchild (this. node); <br/>}< br/> return this; <br/>}, <br/> ATTR: function (BAG) {<br/> for (var I in bag) {<br/> If (bag. hasownproperty (I) {<br/> This. node. setattributens (null, I, bag [I]) <br/>}< br/> return this; <br/>}, <br/> HTML: function (text) {<br/> If (text. nodetype = 3) {<br/> This. node. appendchild (document. createtextnode (text); <br/>}< br/> return this; <br/>}< br/> })() <br/> window. onload = function () {<br/> var root = SVG. create ("SVG "). ATTR ({width: "800px", height: "400px "}). appendto (document. body ). node; <br/> SVG. create ("DESC" ).html ("javascript linear gradient by situ zhengmei "). appendto (Root); <br/> var defs = SVG. create ("defs "). appendto (Root ). node; <br/> // defines a linear gradient <br/> var lineargradient = SVG. create ("lineargradient "). ATTR ({ID: "gradient", X1: "0%", Y1: "0%", X2: "0%", Y2: "100% "}). appendto (defs ). node; <br/> SVG. create ("stop "). ATTR ({offset: "0%", "stop-color": "#008000 "}). appendto (lineargradient) <br/> SVG. create ("stop "). ATTR ({offset: "80%", "stop-color": "# a9ea00 "}). appendto (lineargradient) <br/> SVG. create ("polygon "). ATTR ({points: "60, 0 180,120, 0 120,180 60,180 0,120", fill: "URL (# gradient )"}). appendto (Root) </P> <p >}< br/> </SCRIPT> <br/> <p> JavaScript linear gradient (vertical) by situ zhengmei </p> <br/>

Run code

 
<? XML version = "1.0" standalone = "no"?> <! Doctype SVG public "-// W3C // dtd svg 1.1 // en" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <SVG width = "800px" Height = "400px" xmlns = "http://www.w3.org/2000/svg" version = "1.1"> <DESC> JavaScript linear gradient (angle) by situ zhengmei </DESC> <defs> <lineargradient id = "content" X1 = "0%" Y1 = "0%" X2 = "100%" y2 = "100%"> <stop stop-color = "black" offset = "0%"/> <Stop-color = "teal" offset = "50%"/> <Stop-color = "white" offset = "100%"/> </lineargradient> </defs> <rect x = "10px" Y = "10px" width = "350" Height = "350" fill = "url (# Content) "/> </SVG>
 

<Br/> <! Doctype HTML> <br/> <title> svg by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name =" keywords "content =" javascript dynamic creation of SVG "/> <br/> <meta name =" Description "content =" javascript dynamic creation of SVG "/> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <SCRIPT type = "text/JavaScript"> <br/> (function () {<br/> If (! Window. SVG) {<br/> window. SVG ={}; <br/>}< br/> var SVG = Window. SVG ={< br/> Create: function (name) {<br/> This. node = document. createelementns ("http://www.w3.org/2000/svg", name); <br/> return this; <br/>}, <br/> appendto: function (parent) {<br/> If (typeof this. node! = "Undefined" & parent. nodetype = 1) {<br/> parent. appendchild (this. node); <br/>}< br/> return this; <br/>}, <br/> ATTR: function (BAG) {<br/> for (var I in bag) {<br/> If (bag. hasownproperty (I) {<br/> This. node. setattributens (null, I, bag [I]) <br/>}< br/> return this; <br/>}, <br/> HTML: function (text) {<br/> If (text. nodetype = 3) {<br/> This. node. appendchild (document. createtextnode (text); <br/>}< br/> return this; <br/>}< br/> })() <br/> window. onload = function () {<br/> var root = SVG. create ("SVG "). ATTR ({width: "800px", height: "400px "}). appendto (document. body ). node; <br/> SVG. create ("DESC" ).html ("javascript linear gradient by situ zhengmei "). appendto (Root); <br/> var defs = SVG. create ("defs "). appendto (Root ). node; <br/> // defines a linear gradient <br/> var lineargradient = SVG. create ("lineargradient "). ATTR ({ID: "centent", X1: "0%", Y1: "0%", X2: "100%", Y2: "100% "}). appendto (defs ). node; <br/> SVG. create ("stop "). ATTR ({offset: "0%", "stop-color": "black "}). appendto (lineargradient) <br/> SVG. create ("stop "). ATTR ({offset: "50%", "stop-color": "teal "}). appendto (lineargradient) <br/> SVG. create ("stop "). ATTR ({offset: "100%", "stop-color": "white "}). appendto (lineargradient) <br/> SVG. create ("rect "). ATTR ({X: "10px", Y: "10px", width: "300px", height: "300px", fill: "URL (# centent )"}). appendto (Root); <br/>}< br/> </SCRIPT> <br/> <p> JavaScript linear gradient (angle) by situ zhengmei </p> <br/>

Run code

Next, let's talk about-moz-linear-gradient. Firefox's CSS private attribute is affiliated with background-image, but it is also slightly written as background. Syntax:

 
-Moz-linear-gradient (

  
   
,

   
    
[,

    
     
] *)

    

   

  
 

We can set the values of these two points to determine whether the points are horizontal or vertical, such

 
/* Horizontal */-moz-linear-gradient (left, right [,

  
   
] *)

  
 

 
/* Vertical */-moz-linear-gradient (Top, bottom [,

  
   
] *)

  
 

As for the later part, it is enough to look at the running box below. However, only the latest version of Firefox (3.6a1) can be used to see the results.

<Br/> <! Doctype HTML> <br/> <title> JavaScript linear gradient by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei"/> <br/> <meta name = "Description" content = "javascript linear gradient by situ zhengmei"/> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <style type = "text/CSS"> <br/>. vertical {<br/> background-image:-moz-linear-gradient (top, bottom, <br/> From (red),/* start color */<br/> color-stop (16%, orange ), /* gradient to the height of 16% */<br/> color-stop (32%, yellow ), /* When the position reaches the height of 32%, the gradient is yellow */<br/> color-stop (48%, green ), /* green */<br/> color-stop (48%, blue ), /* the gradient is blue when the position reaches the height of 64% */<br/> color-stop (80%, indigo ), /* When the position reaches the height of 80%, the gradient is purple-blue */<br/> to (Violet);/* The ending color */<br/> Height: 100px; <br/>}< br/>. horizontal {<br/> background-image:-moz-linear-gradient (left, right, <Br/> from (red),/* start color */<br/> color-stop (16%, orange ), /* gradient to the height of 16% */<br/> color-stop (32%, yellow ), /* When the position reaches the height of 32%, the gradient is yellow */<br/> color-stop (48%, green ), /* green */<br/> color-stop (48%, blue ), /* the gradient is blue when the position reaches the height of 64% */<br/> color-stop (80%, indigo ), /* When the position reaches the height of 80%, the gradient is purple-blue */<br/> to (Violet);/* The ending color */<br/> Height: 100px; <br/>}< br/>. angular {<br/> background-image:-moz-linear-gradient (0px 0px, 100px 100px, <br/> from (red),/* start color */<br/> color-stop (16%, orange ), /* gradient to the height of 16% */<br/> color-stop (32%, yellow ), /* When the position reaches the height of 32%, the gradient is yellow */<br/> color-stop (48%, green ), /* green */<br/> color-stop (48%, blue ), /* the gradient is blue when the position reaches the height of 64% */<br/> color-stop (80%, indigo ), /* When the position reaches the height of 80%, the gradient is purple-blue */<br/> to (Violet);/* The ending color */<br/> Height: 100px; <br/>}< br/> </style> <br/> <H3 class = "vertical"> remember to use the latest firefox version to run. </H3> <br/> <Div class = "horizontal"> above is a vertical gradient. Here is a horizontal gradient. </Div> <br/> <Div class = "Angular"> angle gradient </div> <br/>

Run code

For more information, see here.

Next, let's take a look at the CSS Attribute-WebKit-gradient. The usage is similar to-moz-linear-gradient, but there are three differences. The first parameter is used to determine the linear gradient and the radioactive gradient. You can write the linear parameter here. The two vertex values must be left, right, top, and bottom, and they cannot be combined to achieve an angle gradient. Third, the offset of color-stop must be decimal.

<Br/> <! Doctype HTML> <br/> <title> JavaScript linear gradient by situ zhengmei </title> <br/> <meta charset = "UTF-8"/> <br/> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei"/> <br/> <meta name = "Description" content = "javascript linear gradient by situ zhengmei"/> <br/> <base href = "http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"> <br/> <style type = "text/CSS"> <br/>. vertical {<br/> Background:-WebKit-gradient (linear, Left top, left botto M, color-stop (0.0, yellow), <br/> color-stop (0.5, orange), color-stop (1.0, red) No-Repeat; <br/> Height: 100px; <br/>}< br/>. horizontal {<br/> Background:-WebKit-gradient (linear, Left top, right top, from (yellow), <br/> color-stop (16%, orange ), /* the gradient is orange when it reaches the height of 16% */<br/> color-stop (32%, pink ), /* the gradient is pink */<br/> color-stop (32%, green ), /* When the position reaches the height of 48%, the gradient is green */<br/> color-stop (64%, blue),/* to the height of 64 The gradient is blue */<br/> color-stop (80%, indigo ), /* the gradient is purple-blue */<br/> to (red) No-Repeat; <br/> Height: 100px; <br/>}</P> <p> </style> <br/> <H3 class = "vertical"> it must be in Safari and chrome to run. </H3> <br/> <Div class = "horizontal"> above is a vertical gradient. Here is a horizontal gradient. We can use from and top to reduce the first and last color-stop. </Div> <br/>

Run code

Conclusion: This is a harmonious situation brought about by the coexistence of multiple browsers. I would rather ie achieve full monopoly. The next part is the beginning of the journey. To solve the problem of filter failure, we need to use the Ancient Table artifact. SVG, as you can see in the above box, I also specially made a small tool to create these special objects ......

Http://fener2011.blog.163.com/blog/static/164964168201054113257548/

Http://css-tricks.com/css3-gradients/