Javascript 如何消除渐变中的间隙

渐变6、7、8和10在其初始颜色之后具有可见的间隙。有没有办法填补这个空白

我假设一旦对范围进行分区，如果整数分区的总和不能被画布的宽度整除，那么整数分区的总和就会小于原始分区的总和

信息

• render1（）

  -通过在两种颜色之间生成一系列颜色来插值

• render2（）

  -JavaScript的

  createLinearGradient（）

  ，具有n个偶数停止

$（文档）.ready（函数（）{
函数addCanvas（ol）{
变量画布=$（''{
“宽度”：240，
“高度”：10
}).addClass（“grd”）
.appendTo（$（'
）.appendTo（ol））；
返回画布[0]；
}
var ol=$（''）.appendTo（$（'body'）；
变量c1='#FF0000'；
变量c2='#00FF00'；
var帆布；
对于（VarI=1；IB）回报-1*（a-b）；
否则返回b-a；
}
返回幅度（a，b）/n；
}
var c1=六角体GB（颜色1）；
var c2=六角体GB（颜色2）；
var rd=分区（c1.r，c2.r，n）；
var gd=分区（c1.g，c2.g，n）；
var bd=分区（c1.b，c2.b，n）；
var颜色=[]；
变量i，r，g，b，h=n/2；
对于（i=0；i

canvas.grd{
显示：内联块；
保证金：1px0；
}
ol{
左侧填充：32px；
列表样式类型：十进制；
}

---

更新答案：新版本的渲染功能，该功能将额外像素拆分，并在每侧放置大约一半：

function render(canvas, colors) {
    var ctx = canvas.getContext("2d");
    var n = colors.length;
    var r = canvas.width % n;
    var a = Math.floor(r/2), b = n - r + a;
    var subWidth = Math.floor(canvas.width / n) + 1;
    var start = 0;

    for (var i = 0; i < n; i++) {
        if (i == a) {
            subWidth -= 1;
        }
        if(i == b) {
            subWidth += 1;
        }
        ctx.fillStyle = colors[i];
        ctx.fillRect(start, 0, subWidth, canvas.height);

        start += subWidth;
    }
}

函数渲染（画布、颜色）{
var ctx=canvas.getContext（“2d”）；
var n=颜色。长度；
var r=canvas.width%n；
变量a=数学楼层（r/2），b=n-r+a；
var subWidth=Math.floor（canvas.width/n）+1；
var start=0；
对于（变量i=0；i

原始答案

有几件事：

我认为导致间隙变小的原因是一些矩形被绘制成包含分数像素的宽度。你可以做的是将矩形绘制成精确的像素宽度，有些矩形比其他矩形宽一个像素。这里有一个对渲染函数的重写来做这件事（我想。现在已经很晚了：-）

函数渲染（画布、颜色）{
var ctx=canvas.getContext（“2d”）；
var n=颜色。长度；
var r=canvas.width%n；
var subWidth=Math.floor（canvas.width/n）+1；
var start=0；
对于（变量i=0；i

这将计算适合画布宽度的最大整体宽度

colors.length

times。然后计算出剩余的额外像素数（r），然后循环给定第一个r矩形1额外像素宽度

（另外，请记住，

fillRect

函数的第三个参数是width，而不是end。您的调用正在工作，因为矩形是在彼此的顶部绘制的，并且每个矩形的开始位置是正确的。）

我相信有一个更优雅的解决方案，但这个似乎有效

另外，当我处理这个问题时，我注意到在javascript中，canvas.width是300，而不是240。这让我四处搜索，我找到了这个很好的解释，它是如何在SO上工作的：。我认为代码正在渲染成一个300 x 150的画布，然后被缩小到240 x 10。但最终，这并不是问题的根源

---

希望这有帮助

我看不到Chrome、Firefox或IE11（都在Windows8.1上）有任何漏洞。你在哪个平台和浏览器上看到了差距？差距很小：我在Linux上看不到Chrome和Firefox的差距（甚至没有差距），谢谢！我更新了我的脚本并实现了一个

interpolate（）

函数：我今天写了这个函数，你可以传入任意数量的颜色-。好吧，这太棒了，但是我对你的渲染函数的更新将所有额外的像素添加到左边，我忍不住感到高兴。这里有一个版本，两边各放一半。另外，我认为我在回答中提到的缩放问题现在确实影响了这一点，所以我更改了addCanvas函数来设置宽度和高度。我认为这样输出的质量更好。这同样很酷。如果你能告诉我，你打算用它干什么？或者是什么激发了你这么做的灵感？哦，哇，现在你提到了，它看起来有点参差不齐。谢谢你的关心。我正在制作一个进度条/健康表，并决定添加一个非无缝渐变。。。我只有这些了。

function render(canvas, colors) {
    var ctx = canvas.getContext("2d");
    var n = colors.length;
    var r = canvas.width % n;
    var subWidth = Math.floor(canvas.width / n) + 1;
    var start = 0;

    for (var i = 0; i < n; i++) {
        if (i == r) {
            subWidth -= 1;
        }
        ctx.fillStyle = colors[i];
        ctx.fillRect(start, 0, subWidth, canvas.height);

        start += subWidth;
    }
}