Javascript linear gradient 1

Document directory

• Javascript linear gradient (horizontal) by SITU zhengmei
• Javascript linear gradient (vertical) by SITU zhengmei
• Javascript linear gradient (angle) by SITU zhengmei

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.

<Meta charset = "UTF-8"> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei"> <meta name = "description" content = "javascript linear gradient situ zhengmei "> <br/> <style type =" text/css "> # gradient {height: 120px; color: navy; filter: progid: DXImageTransform. microsoft. gradient (enabled = 'false', gradientType = 1, startColorstr = # ffff0000, endColorstr = #00 ffffff );} </style> <p> javascript linear gradient by situ zhengmei <p> <button type = "button" id = "toggle"> enable IE filter </button> <br/>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

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.Copy codeThe Code is as follows: <? 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 (horizontal) by SITU zhengmei </desc>
<Defs>
<LinearGradient id = "gradient" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%">
<Stop offset = "20%" stop-color = "rgb (255,255, 0)" stop-opacity = "1"/>
<Stop offset = "80%" stop-color = "rgb (, 0)" stop-opacity = "1"/>
</LinearGradient>
</Defs>
<Ellipse cx = "200" cy = "190" rx = "85" ry = "55" fill = "url (# gradient)"/>
</Svg>

<Meta charset = "UTF-8"> <meta name = "keywords" content = "javascript dynamic creation of SVG"> <meta name = "description" content = "javascript dynamic creation of SVG"> <base href = "http://www.jb51.net"> <br/> javascript linear gradient (horizontal) by SITU zhengmei <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Dynamic implementation, but the Firefox is dumpfounded. It can be seen that Firefox is also idle in SVG.Copy codeThe Code is as follows: <? 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>

<Meta charset = "UTF-8"> <meta name = "keywords" content = "javascript dynamic creation of SVG"> <meta name = "description" content = "javascript dynamic creation of SVG"> <base href = "http://www.jb51.net"> <br/> javascript linear gradient (vertical) by SITU zhengmei <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

Copy codeThe Code is as follows: <? 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-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>

<Meta charset = "UTF-8"> <meta name = "keywords" content = "javascript dynamic creation of SVG"> <meta name = "description" content = "javascript dynamic creation of SVG"> <base href = "http://www.jb51.net"> <br/> javascript linear gradient (angle) by SITU zhengmei <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

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 (<POINT>, <POINT> [, <STOP>] *)
We can set the values of these two points to determine whether the points are horizontal or vertical, such
/* Level */
-Moz-linear-gradient (left, right [, <STOP>] *) 1.
/* Vertical */
-Moz-linear-gradient (top, bottom [, <STOP>] *)
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.<Meta charset = "UTF-8"> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei"> <meta name = "description" content = "javascript linear gradient situ zhengmei "> <base href =" http://www.jb51.net "> <br/> <style type =" text/css ">. vertical {background-image:-moz-linear-gradient (top, bottom, from (red),/* start color */color-stop (16%, orange ), /* gradient to the height of 16% */color-stop (32%, yellow ), /* When the position reaches the height of 32%, the gradient is yellow */color-stop (48%, green),/* to the height of 48% The gradient is green */color-stop (64%, blue),/* to the height of 64% when the gradient is blue */color-stop (80%, indigo ), /* gradient to the position of High 80% to purple blue */to (violet);/* end color */height: 100px ;}. horizontal {background-image:-moz-linear-gradient (left, right, from (red),/* start color */color-stop (16%, orange ), /* gradient to the height of 16% */color-stop (32%, yellow ), /* When the position reaches the height of 32%, the gradient is yellow */color-stop (48%, green ), /* When the position reaches the height of 48%, the gradient is green */color-stop (64%, blue),/* When the position reaches the height of 64%, the gradient is blue */color-s. Top (80%, indigo),/* to the height of the 80% position when the gradient is purple blue */to (violet);/* end color */height: 100px ;}. angular {background-image:-moz-linear-gradient (0px 0px, 100px 100px, from (red),/* start color */color-stop (16%, orange ), /* gradient to the height of 16% */color-stop (32%, yellow ), /* When the position reaches the height of 32%, the gradient is yellow */color-stop (48%, green ), /* green */color-stop (48%, blue) when the position reaches the height of 64% ), /* the gradient is blue when the position reaches the height of 64% */color-stop (80%, indigo ), /* the gradient is purple-blue */to (violet) when the position reaches the height of 80%;/* ends Color */height: 100px ;}</style> remember to use the latest version of firefox to run. The above is a vertical gradient. Here is a horizontal gradient. Angle gradient <p>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

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.<Meta charset = "UTF-8"> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei"> <meta name = "description" content = "javascript linear gradient situ zhengmei "> <base href =" http://www.jb51.net "> <br/> <style type =" text/css ">. vertical {background:-webkit-gradient (linear, left top, left bottom, color-stop (0.0, yellow), color-stop (0.5, orange ), color-stop (1.0, red) no-repeat; height: 100px ;}. horizontal {background:-webki T-gradient (linear, left top, right top, from (yellow), color-stop (16%, orange ), /* gradient to the height of 16% */color-stop (32%, pink ), /* the gradient is pink at the height of 32% */color-stop (48%, green ), /* green */color-stop (48%, blue) when the position reaches the height of 64% ), /* When the position reaches the height of 64%, the gradient is blue */color-stop (80%, indigo),/* When the position reaches the height of 80%, the gradient is purple blue */to (red )) no-repeat; height: 100px ;}</p> </style> must be in safari and chrome to run. The above is a vertical gradient. Here is a horizontal gradient. We can use from and top to reduce the first and last color-stop. <P>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]

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 ......