Javascript linear gradient 3

Another powerful tool for IE is VML. Although it is not comparable to SVG, it is still very powerful. In terms of gradient implementation, its fill is much more powerful than IE's Gragient filter. However, VML appeared earlier and only a few color names are supported, such as red, blue, and yellow. Other names such as orange can be used to destroy it. Therefore, to use VML for linear gradient, we need to convert these color names.
HTML4 color value

Black=# 000000	Green=# 008000	Silver = # c0c0c0	Lime = #00ff00
Grey = #808080	Olive = #808000	White = # ffffff	Yellow = # ffff00
Maroon = #800000	Navy = #000080	Red = # ff0000	Blue = # 0000ff
Purple = #800080	Teal = #008080	Fuchsia = # ff00ff	Aqua = #00 ffff

We can learn more about the color values on Firefox official website and W3C.
Copy codeThe Code is as follows:
Var htmlcolor = {black: "#000", green: "#008000", silver: "# c0c0c0", lime: "#0f0 ",
Gray: "#808080", olive: "#808000", white: "# fff", yellow: "# ff0 ",
Maroon: "#800000", navy: "#000080", red: "# f00", blue: "# 00f ",
Purple: "#800080", teal: "#008080", fuchsia: "# f0f", aqua: "# 0ff ",
Indigo: "#4b0082", orange: "# ffa500", sienna: "# a0522d", plum: "# dda0dd ",
Gold: "# ffd700", tan: "# d2b48c", snow: "# fffafa", violet: "# ee82ee"
}

Then we create a rect element of the same size within the element that requires a linear gradient, and then add a fill element to set the gradient. The pseudo code is as follows:
Copy codeThe Code is as follows:
<Div class = "gradient" style = "position: relative; width: width; height: height">
Javascript linear gradient by situ zhengmei achieves multiple horizontal gradient effects
<Vml: rect style = "position: absolute; width: width; height; top: 0; left: 0" stroked = "f">
<Vml: fill colors = "color-stop" focus = "100%" type = "gradient" method = "linear"/>
</Vml: rect>
</Div>

<! Doctype html> <title> javascript linear gradient by situ zhengmei </title> <meta charset = "UTF-8"/> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei "/> <meta name =" description "content =" javascript linear gradient by situ zhengmei "/> <style type =" text/css ">. gradient {width: 800px; height: 100px ;}</style> javascript linear gradient by situ zhengmei achieves multiple horizontal gradient effects javascript linear gradient by situ zhengmei achieves multiple vertical gradient effects
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
After the linear gradient of IE is implemented using VML, the length of the entire class is reduced by half.
Let's take a look at how to implement the angle gradient. It's easy for IE to directly input a corner (0-360, or a negative number ). SVG is troublesome. It controls the skew by four attributes of linearGradient. x1, x2, y2, and y2 are actually two points. Assume that the first vertex is (0, 0) and the second vertex is (, 0), which is a horizontal gradient. Assume that the first vertex is (0,100), and the second vertex is (), which is a vertical gradient. To achieve skew, the coordinates of the second vertex must be completely different from those of the first vertex, whether on the X axis or Y axis. This requires trigonometric functions.
Copy codeThe Code is as follows:
Var x = (Math. sin (angle * Math. PI/180) * 100). toFixed (2) + "% ";
Var y = (Math. cos (angle * Math. PI/180) * 100). toFixed (2) + "% ";
This. attr (linearGradient, {x2: x, y2: y });

We should also see that the horizontal gradient and vertical gradient are just a special case. We can abolish the type attribute and change it to angle to input a number ranging from 0 to 360.
<! Doctype html> <title> javascript linear gradient by situ zhengmei </title> <meta charset = "UTF-8"/> <meta name = "keywords" content = "javascript linear gradient by situ zhengmei "/> <meta name =" description "content =" javascript linear gradient by situ zhengmei "/> <style type =" text/css ">. gradient {width: 800px; height: 100px ;} </style> javascript linear gradient by situ zhengmei achieves multiple horizontal gradient effects javascript linear gradient by situ zhengmei achieves multiple vertical gradient effects javascript linear gradient by situ zhengmei achieves multi-angle gradient effects
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]