JavaScript linear gradient

As a new force, Apple has brought us the canvas tag. Canvas was first introduced in Dashboard in Mac OS X, and was then supported by Apple's Safari browser. It then became the standard of HTML5 and supported by standard browsers other than the IE kernel. Apple has done more than this. It thinks SVG is too bulky, so it attributes all the filter tags in SVG (SVG has more filters than IE filters, and has more comprehensive functions). Firefox saw something was wrong, so he quickly made a set of private attributes himself, but the prefix was changed from -webkit- to -moz-. Opera's reaction is quite dull, and it should be said that he is very dissatisfied in private, because Opera's CTO is Hakon Wium Lie, the inventor of CSS. He doesn't like others' things about his own things. Therefore, it is difficult for me to implement linear gradients. IE needs to use IE filters. There are some problems in firefox creating SVG dynamically. It requires the CSS private attribute with its -moz-prefix, safari and chrome need the CSS private attribute with the -webkit-prefix, and opera needs the SVG. Let's break through one by one now.

IE needs to use filters (it doesn't matter if the first letter of Gradient is capitalized and lowercase).

property	illustrate
enabled	Whether to enable filters, default to true
gradientType	Is it a vertical gradient or a horizontal gradient? The default is 0 (vertical gradient), and 1 is a horizontal gradient.
startColorStr	The starting color can accept an 8-bit hex color value, from #FF000000 to #FFFFFFFF, the default is blue #FF0000F; or use red, green and other color values ​​F
endColorStr	End color, can accept an 8-bit hex color value, from #FF000000 to #FFFFFFFF, default is black #FF0000000
startColor	The same as startColorStr, accepts an overall color value of 0 to 4294967295, without a default value
endColor	The same as endColorStr, accepts an overall color value of 0 to 4294967295, without a default value

Let’s talk about the implementation of SVG linear gradient, because the relevant CSS private attributes are derived from here. Since there is no space to support uploading SVGs, I can only generate SVGs dynamically. For me, it is best to be able to implement dynamically. At least, it can reduce the number of requests and write less than the number... The following is a static implementation. As for how to add html to Google it yourself.

linearGradient has several properties such as x1, x2, y1, y2, etc., which can help us achieve horizontal gradient or vertical gradient. We can treat x1, x2, y2, 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 realized.
When x1 is equal to x2 and y1 is not equal to y2, vertical gradient is realized.
When y1 is not equal to y2 and x1 is not equal to x2, the angle gradient is realized.


Dynamic implementation, but it is silent in Firefox, which shows that Firefox has also slacked off on SVG.




Let’s talk about -moz-linear-gradient, Firefox’s CSS private attribute, belongs to background-image, but it is also abbreviated as background. The syntax is:
-moz-linear-gradient( <POINT>, <POINT> [, <STOP>]* )
We can set the value of these two points to determine whether they are horizontal or vertical, such as
/*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, this requires the latest version of firefox (3.6a1) to achieve results.

Next, let’s take a look at the CSS attribute -webkit-gradient. The usage of -moz-linear-gradient is similar, but there are three differences. The first parameter is used to determine whether it is linear gradient and radioactive gradient. Just write linear here. The two point values ​​must be left, right, top and bottom, and no matter how you combine it, the angle gradient cannot be achieved. Third, the offset of color-stop must be a decimal.

Conclusion, this is the harmonious situation brought about by the coexistence of multiple browsers. I would rather IE achieve a complete monopoly. The next part is the beginning of the journey. Just using the ancient artifact of IE to deal with filter failures, we have to use the table, the ancient artifact. SVG, you can see it in the box above, and I also specially created a gadget to create these special objects...