canvas颜色渐变的简单封装

    function Icolor(pen){
        this.pen = pen
    }
    Icolor.prototype = {
        constructor: Icolor,
        //内置彩虹
        ranBow: function (type, length, startpoint) {
            this.line([{
                r: 255,
                g: 0,
                b: 0
            }, {
                r: 255,
                g: 165,
                b: 0
            }, {
                r: 255,
                g: 255,
                b: 0
            }, {
                r: 0,
                g: 255,
                b: 0
            }, {
                r: 0,
                g: 127,
                b: 255
            }, {
                r: 0,
                g: 0,
                b: 255
            }, {
                r: 139,
                g: 0,
                b: 255
            }], type, length, startpoint)
        },
        //渐变函数
        line: function (arr, type, length, startpoint) {
            var length = length || 50
            var startpoint = startpoint || [25, 25];
            if (type == "cross") {
                for (var j = 0; j < arr.length - 1; j++) {
                    var obj1 = arr[j];
                    var obj2 = arr[j + 1];
                    for (var i = 0; i < length; i++) {
                        var colors = this.getColor(obj1, obj2, i, length)
                        this.pen.beginPath();
                        this.pen.moveTo(startpoint[0] + i + j * length, startpoint[1]);
                        this.pen.strokeStyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")"
                        this.pen.lineTo(startpoint[0] + 1 + i + j * length, startpoint[1]);
                        this.pen.stroke()
                    }
                }
            } else {
                for (var j = 0; j < arr.length - 1; j++) {
                    var obj1 = arr[j];
                    var obj2 = arr[j + 1];
                    for (var i = 0; i < length; i++) {
                        var colors = this.getColor(obj1, obj2, i, length)
                        this.pen.beginPath();
                        this.pen.moveTo(startpoint[0], startpoint[1] + i + j * length);
                        this.pen.strokeStyle = "rgb(" + colors.r + "," + colors.g + "," + colors.b + ")"
                        this.pen.lineTo(startpoint[0], startpoint[1] + 1 + i + j * length);
                        this.pen.stroke()
                    }
                }
            }

        },
        //获取颜色
        getColor: function (obj1, obj2, i, length) {
            var r = obj1['r'] - (obj1['r'] - obj2['r']) / length * i
            var g = obj1['g'] - (obj1['g'] - obj2['g']) / length * i
            var b = obj1['b'] - (obj1['b'] - obj2['b']) / length * i
            return {
                r: parseInt(r),
                g: parseInt(g),
                b: parseInt(b)
            }
        }
    };
    //把你的画笔传进去
    var cas = document.querySelector("#table")//获取你的canvas标签 我这里是#table
    var ctx = cas.getContext("2d");//通过这种方式获取你的画笔
    ctx.lineWidth = 10//设置线宽 不设置默认是1
    var mycolor = new Icolor(ctx);// 把你的画笔传入构造函数中
    //ranBow(type,length,startpoint)
    //type :cross横排 传其他或者不传 则为竖排
    //length :长度 默认50
    //startpoint ：起始点 默认25，25
    //上面三个参数都是可选参数
    mycolor.ranBow("cross");
    //line(arr,type,length,startpoint)
    // arr:渐变颜色的数组
    // 除了arr是必选 其他都是可选
    mycolor.line(
        [{r:100, g:250, b:200},{r:40, g:150, b:250}],
        "",
        100,
        [50,50]
    )

 

转载于:https://my.oschina.net/u/3281152/blog/866541