Javascript 阴影重叠多边形

我试图在我的trihex后面添加一个阴影，但是当阴影应该在它后面时，它会与实际图像重叠。我已经尝试过修复这个问题，但是添加一个临时画布或者以某种方式将trihex向前推进都是可行的。 这里是JSFIDLE链接，您可以看到我在说什么：

下面是创建阴影的位置：

function drawHexagon(canvasContext, x, y, fill) {
    fill++;           
    var fill = fill || false;

    canvasContext.shadowColor = "rgb(45, 44, 44)"; //Here is the shadow
    canvasContext.shadowBlur = 5;
    canvasContext.shadowOffsetX = 5;
    canvasContext.shadowOffsetY = 5; //Shadow Ends

    canvasContext.beginPath(); //Start drawing hexagaon
    canvasContext.moveTo(x + hexRadius, y);
    canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight);
    canvasContext.lineTo(x + hexRectangleWidth, y + hexHeight + sideLength);
    canvasContext.lineTo(x + hexRadius, y + hexRectangleHeight);
    canvasContext.lineTo(x, y + sideLength + hexHeight);
    canvasContext.lineTo(x, y + hexHeight);
    canvasContext.closePath(); // Stop drawing hexagon
    //Unrelated, this is just where some colors are set
    if(fill) {
        switch(fill){
            case 1:
                canvasContext.fillStyle = JUNGLECOLOR;
                break;
            case 2:                 
                canvasContext.fillStyle = GRASSCOLOR;
                break;
            case 3:
                canvasContext.fillStyle = DESERTCOLOR;
                break;
            case 4:
                canvasContext.fillStyle = QUARRYCOLOR;
                break;
            case 5:
                canvasContext.fillStyle = LAGOONCOLOR;
                break;
            default:
                break;
        }
    }
    else{
        canvasContext.fillStyle = VOLCANOCOLOR;
    }
        canvasContext.fill();
        canvasContext.strokeStyle = "white";
        canvasContext.stroke();
}

基本上，有一点阴影重叠的trihex。

通过分层阴影。 2D画布上的阴影只用于最简单的渲染，而不是任何东西。它们的速度很慢，如果你有一种以上的颜色，你最终会遇到各种各样的分层和构图问题

解决问题的最快方法是在两个过程（或层）中进行渲染。第一层或所谓的阴影过程是在阴影打开的情况下绘制的

然后在绘制所有阴影后，进行下一层渲染顶层，以便没有阴影与上面的层重叠

两个过程阴影的快速示例。

//小提琴上的颜色
const JUNGLECOLOR='rgba（01100,0255）'；
常量GRASSCOLOR='rgba（0,225,0,255）'；
常量沙漠色='rgba（255、201、102、255）'；
const QUARRYCOLOR='rgba（123123139255）'；
const lagoncolor='rgba（0191255255）'；
常量颜色='rgba（255,48,48,255）'；
var颜色=[丛林颜色、草地颜色、沙漠颜色、采石颜色、泻湖颜色、火山颜色]；
//获取上下文并设置设置
const ctx=canvas.getContext（“2d”）；
常数hexSize=40；
常数hexGridCenterX=150；
常数hexGridCenterY=100；
ctx.lineWidth=2；
//函数只创建十六进制路径，不绘制
函数drawHex（x、y、尺寸）{
ctx.moveTo（x，y-尺寸）；
ctx.lineTo（x+尺寸，y-尺寸/2）；
ctx.lineTo（x+尺寸，y+尺寸/2）；
ctx.lineTo（x，y+尺寸）；
ctx.lineTo（x-尺寸，y+尺寸/2）；
ctx.lineTo（x-尺寸，y-尺寸/2）；
ctx.closePath（）；
}
//用颜色和轮廓画一个十六进制。调用上面的函数。
函数颜色（x、y、大小、颜色）{
ctx.beginPath（）；
ctx.fillStyle=col；
ctx.strokeStyle=“白色”；
drawHex（x，y，尺寸）；
ctx.fill（）；
ctx.stroke（）
}
//一次绘制所有六角体，以便阴影不会消失
//相互重叠，就像重叠一样糟糕
//上面。
函数shadowPass（）{
常数x=hexGridCenterX；
常数y=十六进制；
保存（）；//保存状态
ctx.shadowColor=“rgb（45,44,44）”；
ctx.shadowBlur=5；
ctx.shadowOffsetX=5；
ctx.shadowOffsetY=5；
ctx.fillStyle=“黑色”；
ctx.beginPath（）；//颜色目前不重要
drawHex（x-六角尺寸，y+六角尺寸，六角尺寸）；
drawHex（x+hexSize，y+hexSize，hexSize）；
drawHex（x，y-六角尺寸+六角尺寸/2，六角尺寸）；
ctx.fill（）；//创建阴影；
还原（）；//还原关闭阴影的状态
}
//只绘制带有颜色且没有阴影的六角体
函数colorPass（）{
常数x=hexGridCenterX；
常数y=十六进制；
drawHexColor（x-hexSize，y+hexSize，hexSize，颜色[2]）；
drawHexColor（x+hexSize，y+hexSize，hexSize，颜色[1]）；
drawHexColor（x，y-hexSize+hexSize/2，hexSize，颜色[5]）；
}
//先画阴影
shadowPass（）；//这让一切都笼罩在阴影之下
//然后在上面画出没有阴影的颜色
colorPass（）；

---

笔划也会创建阴影。所以你有两个影子。一个用于填充，另一个在顶部绘制的是笔划的阴影。在绘制笔划之前，您需要旋转阴影，否则需要一些更复杂的代码来纠正阴影。当您说在笔划之前关闭阴影时，这是什么意思？我应该把阴影移到函数外吗？我从函数内取出笔划，然后改为只调用，但由于某种原因，只有左六边形有白色笔画的风格，看起来它高于图像的其余部分。我刚刚看了你的小提琴，它需要一些更复杂的工作才能得到阴影，因为你也从一个六边形得到阴影。你需要两次画六角。首先绘制所有打开阴影的六角体。这将创建基础阴影。但是有超过一圈。然后重新绘制所有的六角体，但没有阴影。或者把六角画到屏幕外的画布上，然后把带有阴影的画布画到显示画布上。我只是尝试重新绘制，但没有产生结果，阴影似乎仍然出现。也许我做错了？如果不太麻烦的话，您可以用JSFIDLE演示一下。