tinygradient 学习笔记

tinygradient  ——  方便设置渐变颜色的库 （https://www.npmjs.com/package/tinygradient）

Easily generate color gradients with an unlimited number of color stops and steps. 

它依赖 TinyColor 这个库！

那就先从学习 tinycolor 开始吧 

tintcolor —— JavaScript color tooling（https://github.com/bgrins/TinyColor）

它支持  hsl    hsv   rgb  和  ColorName 写法

直接写核心用法吧！

var color = tinycolor("red");
color.getFormat(); // "name"
color = tinycolor({r:255, g:255, b:255});
color.getFormat(); // "rgb"

var color = tinycolor("red");
color.getOriginalInput(); // "red"
color = tinycolor({r:255, g:255, b:255});
color.getOriginalInput(); // "{r: 255, g: 255, b: 255}"

变换颜色  ColorName <=> hex
var color1 = tinycolor("red");
color1.isValid(); // true
color1.toHexString(); // "#ff0000"

var color2 = tinycolor("not a color");
color2.isValid(); // false
color2.toString(); // "#000000"

var color = tinycolor("red");
color.toRgb(); // { r: 255, g: 0, b: 0, a: 1 }

获取颜色的透明度

var color1 = tinycolor("rgba(255, 0, 0, .5)");
color1.getAlpha(); // 0.5

var color2 = tinycolor("rgb(255, 0, 0)");
color2.getAlpha(); // 1

var color3 = tinycolor("transparent");
color3.getAlpha(); // 0

设置颜色的 透明度

var color = tinycolor("red");

color.getAlpha(); // 1

color.setAlpha(0.5);

color.getAlpha(); // 0.5

color.toRgbString(); // "rgba(255, 0, 0, 0.5)"

大概就是 把一个颜色变成 一个实例。

这个实例的属性有几个实用的方法

isValid()

toHex()

toHexString()

toRgbString()

toRgb()

getAlpha()

setAlpha(<number>)

=======================================

tinygradient 就是以来 TinyColor 进行一次封装 变成一个让你可以 设置渐变颜色的库 

var gradient = tinygradient('red', 'green', 'blue');

var gradient = tinygradient([

  '#ff0000',

  '#00ff00',

  '#0000ff'

]);

var gradient = tinygradient([

  tinycolor('#ff0000'),       // tinycolor object

  {r: 0, g: 255, b: 0},       // RGB object

  {h: 240, s: 1, v: 1, a: 1}, // HSVa object

  'rgb(120, 120, 0)',         // RGB CSS string

  'gold'                      // ColorName

]);

var gradient = tinygradient([    //  pos  指的是 颜色 的位置 

  {color: '#d8e0de', pos: 0},

  {color: '#255B53', pos: 0.8},

  {color: '#000000', pos: 1}

]);

gradient.rgbAt(0.55) // 可以获取到 0.55 位置上的颜色

// 返回一个线性的从左到右的渐变

var gradientStr = gradient.css();

// 返回一个从左上角开始的径向的渐变

var gradientStr = gradient.css('radial', 'farthest-corner ellipse at top left');