Program Description
"Colorgrads Color Gradient"
The function of program Colorgrads is to generate a set of color gradients through StartColor and EndColor.
Colors can be expressed in red (R), Green (g), Blue (b) three colors.
In the program, the general color representation is first converted into a set of elements in red (R), Green (g), Blue (b) Three color values by GetColor.
The first thing to know is what color representation, from the colors part of the consortium can be known in the following forms:
Keyword mode:
EM {color:red}
RGB Color Mode:
EM {color: #f00}
EM {color: #ff0000}
EM {Color:rgb (255,0,0)}
EM {Color:rgb (100%, 0%, 0%)}
All of these represent the same color (red).
Gets the form of the color attribute in IE and FF and different, FF unification returns the third form of RGB color mode, IE returns in the form of setting.
First of all, the RGB color mode, the first two more commonly used to understand their differences, it is 16 into the form of representation, and we want 10 into the system.
Converts a 16-in-binary character into a 10-digit number, typically using parseint, which can be converted using parseint after substr the intercepted character.
For #ff0000 this form can be converted in this way:
Copy Code code as follows:
Return Map ([Color.substr (1, 2), Color.substr (3, 2), Color.substr (5, 2)],
function (x) {return parseint (x, 16);}
)
The second parameter of the parseint is the value of the first argument.
For the #f00 form, keep up with the previous one, just change it to a full representation before converting it:
Copy Code code as follows:
Return Map ([Color.substr (1, 1), Color.substr (2, 1), Color.substr (3, 1)],
function (x) {return parseint (x + x, 16);}
)
The next two kinds of possible use is less, one in the 10-in RGB color value, the other is expressed as a percentage.
FF is strictly expressed in that format, while IE "relaxes" a lot, for example:
IE can allow the number of percentages of mixed, FF can not;
FF must be comma-delimited, ie can be separated by a single space;
Of course we use it best to set it according to the standards of the consortium.
PS: The EM {COLOR:RGB 1.0 0.0 0.0} written in the DHTML Manual is not available at all, don't be misled.
In this form, the program obtains the numerical value, if any% calculates the corresponding value according to the percentage:
Copy Code code as follows:
Return Map (Color.match/\d+ (\.\d+)? \%?/g),
function (x) {return parseint (x.indexof ("%") > 0 parsefloat (x,) * 2.55:x, 10);
)
And the key words everyone is very familiar with, to transform but very troublesome, because there is no certain rule can only one one corresponds:
Copy Code code as follows:
var mapping = {"Red": "#FF0000"};//slightly
color = Mapping[color.tolowercase ()];
if (color) {
Return Map ([Color.substr (1, 2), Color.substr (3, 2), Color.substr (5, 2)],
function (x) {return parseint (x, 16);}
)
}
After you get the start and end color data in the Create Creation color collection program, you can get the step by step (how many steps):
Copy Code code as follows:
StartColor = this. GetColor (this. StartColor),
EndColor = this. GetColor (this. EndColor),
Stepr = (endcolor[0]-startcolor[0])/this. Step,
STEPG = (endcolor[1]-startcolor[1])/this. Step,
STEPB = (endcolor[2]-startcolor[2])/this. Step;
Then build the collection based on the step size:
Copy Code code as follows:
for (var i = 0, n = this. Step, R = startcolor[0], G = startcolor[1], B = startcolor[2]; I < n; i++) {
Colors.push ([R, G, b]); R + + Stepr; G + + Stepg; B + + STEPB;
}
Colors.push (EndColor);
The correct color values are between 0 and 255 and are not decimal, so it's best to fix them:
Copy Code code as follows:
return map (colors, function (x) {return map (x), function (x) {
Return Math.min (Math.max (0, Math.floor (x)), 255);
});});
Current 1/3 page
123 Next read the full text
