Javascript 将两个画布形状紧挨着放，没有间隙？

我正在用六角板在HTML画布上工作。在我的应用程序中，每个六边形都有填充颜色、黑色边框和彩色边框（表示谁拥有该六边形）。当你选择一个六边形时，填充物变为浅蓝色，而你相邻的敌方六边形填充物变为红色

我发现在没有任何像素间隙的情况下，不可能完美地将黑色边框内部的彩色边框对齐。下面是一张特写照片。你可以看到在高亮度六边形的边缘，填充颜色在彩色边框和黑色边框之间有一点流血

你认为这是我如何计算每个六边形的像素位置的函数，还是因为像素是正方形，所以无法将一个有角度的形状排列成另一个有角度的形状

下面是我用来创建给定六边形（黑色边框）并将彩色边框放入其中的代码

//Main Hex
var numberOfSides = 6,
size = this.radius,
Xcenter = x0 + (this.width / 2),
Ycenter = y0 + (this.height / 2);
this.context.beginPath();
this.context.lineWidth = 1;
this.context.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          
for (var i = 1; i <= numberOfSides;i += 1) {
    this.context.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
if (fillColor && highlight == false) {
    this.context.fillStyle = fillColor;
}
if (highlight == true){
    this.context.fillStyle = highlightColor;
    this.context.globalAlpha=0.65;
}
this.context.fill();
this.context.closePath();
this.context.stroke();

//Inside Colored Hex
var numberOfSides = 6,
size = this.radius-4.75,
Xcenter = x0 + (this.width / 2),
Ycenter = y0 + (this.height / 2);
this.context.strokeStyle = map.data[tile.row][tile.column].color;
this.context.beginPath();
this.context.lineWidth = 6;
this.context.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          
for (var i = 1; i <= numberOfSides;i += 1) {
    this.context.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
this.context.closePath();
this.context.stroke();

//主十六进制
var numberOfSides=6，
尺寸=此半径，
Xcenter=x0+（此宽度为1/2），
Y中心=y0+（此高度为/2）；
this.context.beginPath（）；
this.context.lineWidth=1；
this.context.moveTo（Xcenter+size*Math.cos（0），Ycenter+size*Math.sin（0））；
对于（var i=1；i），您对方形像素造成的效果的看法是正确的。您注意到的是抗锯齿。使用方形像素绘制对角线会产生锯齿状阶梯效果。浏览器尝试通过沿锯齿状边缘添加混合像素，从视觉上减少这些“锯齿”（这些添加的像素是您看到的出血点）。您无法关闭画布的抗锯齿，因此唯一的解决方法是逐像素创建六边形字段，以便浏览器不会应用抗锯齿（导致性能不佳）.Hmm.在没有意识到的情况下，我可能会有一个解决方案。如果我使外部黑色六边形的填充样式与彩色边界六边形的颜色相同，然后使彩色边界六边形的填充样式等于地图上的绿色（这是背景），那么“出血”将被视为彩色边界…这将消除这种抗锯齿。对吗？我将尝试并报告。在这种情况下，出血最有可能是由于位置值中的舍入“错误”，因为它们都是分数。尝试将整个上下文移动0.5像素（使用平移，全局移动一次）然后将所有位置值四舍五入到最接近的整数值。如果你设置了一个小提琴，我们可以尝试一下什么四舍五入策略在这里最有效。