在js中，使用canvas绘制渐变色线条

效果

代码

注：看注释

		var colors = ['#6bfae1' ,'#63b9e9' ,'red' ,'yellow' ,'blue', 'green'];
        var ctx = canvas.getContext('2d');
        ctx.moveTo(50, 300);
        ctx.lineTo(700, 300);
        ctx.lineTo(750, 200);
        ctx.lineTo(780, 150);
        //  ...若干个坐标
        var line = ctx.createLinearGradient(50, 300, 780, 150); //线性渐变的范围
        //  参数一，偏移量取值范围 0-1
        //  参数二，颜色值
        for (var i=0; i<colors.length; i++) {
			line.addColorStop(i / colors.length, colors[i]);
		}
        ctx.lineWidth = 8;
        ctx.strokeStyle = line;
        ctx.stroke();

附加：加上阴影

		ctx.shadowBlur = 20;  //  阴影等级
        ctx.shadowOffsetX = "0";  //  阴影位置默认(0, 0)
        ctx.shadowOffsetY = "0";
        ctx.shadowColor = "#fff";  //  阴影的颜色

结尾处，欢迎交流学习，纠错。