js 创建渐变颜色带，并且通过一个数组随机取颜色

  //用构造函数定义对象的非函数属性
    function ColorBelt() {
        this.canvas =  document.createElement('canvas');
        this.context = this.canvas.getContext('2d');//指向2d渲染环境的引用
        var colorArr = Array.prototype.slice.call(arguments);//传的参数转为数组
        if (0 == colorArr.length) {
            this.context.fillStyle = this.defGradient();
        } else if (1 == colorArr.length) {
            this.context.fillStyle = [0];
        } else {
            this.context.fillStyle = this.createLinearGradient(colorArr);
        }
        this.context.fillRect(0, 0, 100,3);
    }

    ColorBelt.prototype.createLinearGradient = function (colorArr) {
        var maxIndex = colorArr.length - 1;
        var xSpan = 1 / maxIndex;
        var grd = this.context.createLinearGradient(0, 0, 100, 0);//这是一个从左到右的
        for (var i = 0; i < maxIndex; i++) {
            grd.addColorStop(xSpan * i, colorArr[i]);
        }
        grd.addColorStop(1, colorArr[maxIndex]);
        return grd;
    }
    ColorBelt.prototype.defGradient = function () {
        var grd = this.context.createLinearGradient(0, 0, 100, 0);//这是一个从左到右的渐变
        grd.addColorStop(0, "red");
        grd.addColorStop(0.08, "#ff8000");
        grd.addColorStop(0.17, "yellow");
        grd.addColorStop(0.25, "#80ff00");
        grd.addColorStop(0.33, "lime");
        grd.addColorStop(0.42, "#00ff80");
        grd.addColorStop(0.50, "cyan");
        grd.addColorStop(0.58, "#0080ff");
        grd.addColorStop(0.67, "blue");
        grd.addColorStop(0.75, "#8000ff");
        grd.addColorStop(0.83, "magenta");
        grd.addColorStop(0.92, "#ff0080");
        grd.addColorStop(1, "red");
        return grd;
    }
    ColorBelt.prototype.getColors = function (count) {
        var colorArr = [];
        var xSpan = parseInt(100 / count);
        for (var i = 0; i < count; i++) {
            colorArr.push(this.getPixelColor(i * xSpan, 1));
        }
        return colorArr;
    }
    ColorBelt.prototype.getPixelColor = function (x, y) {
        var imageData = this.context.getImageData(x, y, 1, 1);
        // 获取该点像素数据
        var pixel = imageData.data;
        var r = pixel[0];
        var g = pixel[1];
        var b = pixel[2];
        var a = pixel[3] / 255
        a = Math.round(a * 100) / 100;
        var rHex = r.toString(16);
        r < 16 && (rHex = "0" + rHex);
        var gHex = g.toString(16);
        g < 16 && (gHex = "0" + gHex);
        var bHex = b.toString(16);
        b < 16 && (bHex = "0" + bHex);
        var rgbaColor = "rgba(" + r + "," + g + "," + b + "," + a + ")";
        var rgbColor = "rgb(" + r + "," + g + "," + b + ")";
        var hexColor = "#" + rHex + gHex + bHex;
        return {
            rgba: rgbaColor,
            rgb: rgbColor,
            hex: hexColor,
            r: r,
            g: g,
            b: b,
            a: a
        };
    }
//使用实例
    var sd = new ColorBelt("red", "blue");
    console.log(sd.getColors(4));