根据canvas画一条平滑的渐变线段。

做了点修改。

实现原理
依靠canvas 2d的api方法context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);来实现绘制曲线。

实现目标

具体过程

		 var canvas = document.querySelector('canvas'),
		 ctx = canvas.getContext('2d');
    var points =[{ x: 50, y: 80 }, { x: 60, y: 50 }, { x: 100, y: 80 }, { x: 120, y: 80 }, { x: 150, y: 90 }, { x: 180, y: 50 }];
    ctx.lineWidth=3;
	//background-image: linear-gradient(to right, #7853fd , #a6cbfe);
	var gnt1 = ctx.createLinearGradient(50,100,180,50);//线性渐变的起止坐标
	gnt1.addColorStop(0,'#744dfe');
	gnt1.addColorStop(1,'#f65ca4');
	ctx.strokeStyle = gnt1;
    //ctx.strokeStyle="#7853fd";
	//ctx.addColorStop="#a6cbfe";
    drawPath(points,ctx);
    ctx.createLinearGradient(50,100,180,50);
    function drawPath(path,ctx){
        var Vector2 = function(x, y) {
            this.x = x;
            this.y = y;
        };
        //Vector2，一般用来表示向量，但有的时候也用来当作点来进行一计算。
        Vector2.prototype = {
            "length": function () {
                return Math.sqrt(this.x * this.x + this.y * this.y);
            },
            "normalize": function () {
                var inv = 1 / this.length();
                return new Vector2(this.x * inv, this.y * inv);
            },
            "add": function (v) {
                return new Vector2(this.x + v.x, this.y + v.y);
            },
            "multiply": function (f) {
                return new Vector2(this.x * f, this.y * f);
            },
            "dot": function (v) {
                return this.x * v.x + this.y * v.y;
            },
            "angle": function (v) {
                return Math.acos(this.dot(v) / (this.length() *v.length())) * 180 / Math.PI;
            }
        };
        /*
        length求向量长度
		normalize转单位向量
		add向量叠加
		multiply向量翻倍
		dot内积		
		angle方法用来求两个向量的夹角
        */
        function getControlPoint(path) {
            var rt = 0.3;
            var i = 0, count = path.length - 2;
            var arr = [];
            for (; i < count; i++) {
                var a = path[i], b = path[i + 1], c = path[i + 2];
                var v1 = new Vector2(a.x - b.x, a.y - b.y);
                var v2 = new Vector2(c.x - b.x, c.y - b.y);
                var v1Len = v1.length(), v2Len = v2.length();
                var centerV = v1.normalize().add(v2.normalize()).normalize();
                var ncp1 = new Vector2(centerV.y, centerV.x * -1);
                var ncp2 = new Vector2(centerV.y * -1, centerV.x);
                if (ncp1.angle(v1) < 90) {
                    var p1 = ncp1.multiply(v1Len * rt).add(b);
                    var p2 = ncp2.multiply(v2Len * rt).add(b);
                    arr.push(p1, p2)
                }
                else {
                    var p1 = ncp1.multiply(v2Len * rt).add(b);
                    var p2 = ncp2.multiply(v1Len * rt).add(b);
                    arr.push(p2, p1)
                }
            }
            return arr;
        }

        var point=getControlPoint(path);
        console.log(point);
        var points = path;
        ctx.beginPath();
        var int=0;
        for(var i =0;i

如图效果：

原文https://blog.csdn.net/qq_30100043/article/details/79132509