Javascript 具有彩虹梯度的复杂形状

我试图在画布上画一个人物，用彩虹色的渐变填充。想要的结果是这样的：

创建形状本身非常简单，只需创建一条路径并绘制线条。但是，实际上用渐变填充它似乎有点困难，因为似乎只支持径向渐变和线性渐变

我得到的最接近的结果是：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var梯度=ctx.createLinearGradient（0,0,0100）；
gradient.addColorStop（0，'红色'）；
gradient.addColorStop（0.25，'黄色'）；
gradient.addColorStop（0.5，'绿色'）；
渐变色.addColorStop（0.75，'蓝色'）；
gradient.addColorStop（1，“紫色”）；
ctx.moveTo（0,40）；
ctx.lineTo（200,0）；
ctx.lineTo（200100）；
ctx.lineTo（0,50）；
ctx.closePath（）；
ctx.fillStyle=渐变；
ctx.fill（）
原生html5画布无法拉伸渐变填充的一侧

但有一个解决办法：

通过绘制一系列长度不断增加的垂直渐变线来创建拉伸渐变


然后可以使用变换以所需角度绘制拉伸渐变


示例代码和演示：


var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
变量长度=200；
var y0=40；
变量y1=65
var停止=[
{停止：0.00，颜色：'red'}，
{停止：0.25，颜色：'yellow'}，
{停止：0.50，颜色：'green'}，
{停止：0.75，颜色：'blue'}，
{停止：1.00，颜色：'violet'}，
];
var g=拉伸dGradiCenter（长度，y0，y1，停止）；
翻译（50100）；
ctx.旋转（-Math.PI/10）；
ctx.drawImage（g，0,0）；
函数StretchedGradiCenter（长度、起始高度、结束高度、停止）{
var y=启动高度；
var yInc=（结束高度开始高度）/长度；
//创建临时画布以保持拉伸的渐变
var c=document.createElement（“画布”）；
var cctx=c.getContext（“2d”）；
c、 宽度=长度；
c、 高度=末端高度；
//剪辑路径以消除底部的“锯齿”
cctx.beginPath（）；
cctx.moveTo（0,0）；
cctx.lineTo（长度，0）；
cctx.lineTo（长度、末端高度）；
cctx.lineTo（0，启动高度）；
cctx.closePath（）；
cctx.clip（）；
//随着高度的增加，绘制一系列垂直渐变线
对于（var x＝0；席）不知道它是否能工作，但是一个想法：你可以制作一个规则的矩形，放上它的梯度，然后用<代码>变换< /C> >对它进行缩放和缩放：