html渐变色原理,HTML5 渐变颜色样本

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

function cubicInt(t, A, B) {

var weight = t * t * (3 - 2 * t);

return A + weight * (B - A);

}

function getR(iR, iY, iB) {

// red

var x0 = cubicInt(iB, 1.0, 0.163);

var x1 = cubicInt(iB, 1.0, 0.0);

var x2 = cubicInt(iB, 1.0, 0.5);

var x3 = cubicInt(iB, 1.0, 0.2);

var y0 = cubicInt(iY, x0, x1);

var y1 = cubicInt(iY, x2, x3);

return Math.ceil(255 * cubicInt(iR, y0, y1));

}

function getG(iR, iY, iB) {

// green

var x0 = cubicInt(iB, 1.0, 0.373);

var x1 = cubicInt(iB, 1.0, 0.66);

var x2 = cubicInt(iB, 0.0, 0.0);

var x3 = cubicInt(iB, 0.5, 0.094);

var y0 = cubicInt(iY, x0, x1);

var y1 = cubicInt(iY, x2, x3);

return Math.ceil(255 * cubicInt(iR, y0, y1));

}

function getB(iR, iY, iB) {

// blue

var x0 = cubicInt(iB, 1.0, 0.6);

var x1 = cubicInt(iB, 0.0, 0.2);

var x2 = cubicInt(iB, 0.0, 0.5);

var x3 = cubicInt(iB, 0.0, 0.0);

var y0 = cubicInt(iY, x0, x1);

var y1 = cubicInt(iY, x2, x3);

return Math.ceil(255 * cubicInt(iR, y0, y1));

}

function ryb2rgb(color) {

var R = color[0] / 255;

var Y = color[1] / 255;

var B = color[2] / 255;

var R1 = getR(R, Y, B);

var G1 = getG(R, Y, B);

var B1 = getB(R, Y, B);

var ret = [R1, G1, B1];

return ret;

}

function cycle3(steps, callback) {

var a, b, c, i;

var step = 1 / steps;

i = 0;

a = 1;

b = 0;

c = 0;

while (i < steps) {

i++;

callback(a, b, c);

a = a - step;

b = b + step;

}

i = 0;

a = 0;

b = 1;

c = 0;

while (i < steps) {

i++;

callback(a, b, c);

b = b - step;

c = c + step;

}

i = 0;

a = 0;

b = 0;

c = 1;

while (i < steps) {

i++;

callback(a, b, c);

c = c - step;

a = a + step;

}

}

function easeNone(component) {

return component;

}

function easeSaw(component) {

component = Math.min(component * 2, 1);

return component;

}

function easeSin(component) {

return Math.sin(component * (Math.PI / 2));

}

function easeSawSin(component) {

component = Math.min(Math.sin(component * (Math.PI / 2)) * 2, 1);

return component;

}

function make255(component) {

return Math.floor(component * 255);

}

function addSwatch(container, r, g, b) {

var swatch = $("

var rgb = "rgb(" + [r, g, b].join(",") + ")";

swatch.css("backgroundColor", rgb);

container.append(swatch);

}

function addRow(easing) {

var container = $("