Javascript画布是否将径向渐变应用于线段？

我正试图在HTML5画布中为我的2D游戏创建一个阴影系统。现在，我正在渲染我的阴影，如下所示：

function drawShadows(x, y, width) {
    if (shadowSprite == null) {
        shadowSprite = document.createElement('canvas');
        var tmpCtx = shadowSprite.getContext('2d');
        var shadowBlur = 20;
        shadowSprite.width = shadowResolution;
        shadowSprite.height = shadowResolution;
        var grd = tmpCtx.createLinearGradient(-(shadowResolution / 4), 0,
            shadowResolution, 0);
        grd.addColorStop(0, "rgba(0, 0, 0, 0.1)");
        grd.addColorStop(1, "rgba(0, 0, 0, 0)");
        tmpCtx.fillStyle = grd;
        tmpCtx.shadowBlur = shadowBlur;
        tmpCtx.shadowColor = "#000";
        tmpCtx.fillRect(0, 0, shadowResolution, shadowResolution);
    }
    graph.save();
    graph.rotate(sun.getDir(x, y));
    graph.drawImage(shadowSprite, 0, -(width / 2), sun.getDist(x, y), width);
    graph.restore();
}

这将渲染具有线性渐变的立方体，该渐变从黑色渐变为alpha 0。 但是，这不会产生真实的结果，因为它始终是一个矩形。以下是描述问题的图示：

---

对不起，我不是很有艺术感。绘制梯形形状不是问题。（蓝色）。问题是，我仍然有一个梯度。有没有可能用渐变画出这样的形状？

画布非常灵活。几乎一切皆有可能。此示例绘制正在投射的灯光。但反过来也很容易。将阴影绘制为渐变

如果追求真实感，则使用创建的形状设置剪裁区域，然后渲染精确的照明和阴影解决方案，而不是渲染照明（或阴影）的渐变

使用lineTo和渐变，您可以根据我的意愿创建任何形状和渐变。此外，为了获得最佳效果，请使用globalCompositeOperation，因为它们有多种过滤器

演示演示了如何混合渐变和阴影贴图。（非常基本，没有实现递归，阴影只是近似值。）

var canvas=document.getElementById（“canV”）；
var ctx=canvas.getContext（“2d”）；
变量鼠标={
x:0,，
y:0，
};
函数mouseMove（事件）{
mouse.x=event.offsetX；mouse.y=event.offsetY；
如果（mouse.x==未定义）{mouse.x=event.clientX；mouse.y=event.clientY；}
}
//添加鼠标控件
canvas.addEventListener（'mousemove'，mousemove）；
var boundSize=10000；//一个数字。。。。
var createImage=函数（w，h）{//创建一个映像
var图像；
image=document.createElement（“画布”）；
image.width=w；
image.height=h；
image.ctx=image.getContext（“2d”）；
返回图像；
}  
var directionC=function（x，y，xx，yy）{//这应该是内联的，但是角度干扰了我的头部
var a；//所以把它移到这里
a=Math.atan2（yy-y，xx-x）；//为了清晰和我的理智健康
返回（a+Math.PI*2）%（Math.PI*2）；//不喜欢负角度。
}
//创建背景图像
var back=createImage（20,20）；
back.ctx.fillStyle=“#333”；
back.ctx.fillRect（0,0,20,20）；
//创建背景图像
var backLight=createImage（20,20）；
backLight.ctx.fillStyle=“#ACD”；
背光.ctx.fillRect（0,0,20,20）；
//创建圆形图像
var circle=createImage（64,64）；
circle.ctx.fillStyle=“红色”；
circle.ctx.beginPath（）；
圆.ctx.arc（32,32,30,0，Math.PI*2）；
circle.ctx.fill（）；
//创建一些半随机的圆
var循环=[]；
推({
x:200*Math.random（），
y:200*Math.random（），
比例：Math.random（）*0.8+0.3，
});
推({
x:200*Math.random（）+200，
y:200*Math.random（），
比例：Math.random（）*0.8+0.3，
});
推({
x:200*Math.random（）+200，
y:200*Math.random（）+200，
比例：Math.random（）*0.8+0.3，
});
推({
x:200*Math.random（），
y:200*Math.random（）+200，
比例：Math.random（）*0.8+0.3，
});
//每个圆上都有阴影；
var shadows=[{}，{}，{}，{}]；
var update=函数（）{
变量c、dir、dist、x、y、x1、y1、x2、y2、dir1、dir2、aAdd、i、j、s、s1、nextDir、rev、revId；
rev=false；//如果在圆内，则反转渲染。
//在鼠标位置设置渐变
var g=ctx.createRadialGradient（mouse.x，mouse.y，canvas.width*1.6，mouse.x，mouse.y，2）；
//做每一个圆圈，并计算出两条阴影线。
对于（变量i=0；is.d1&&s1.d2