HTML5画布绘图中奇怪的条纹？

Question

我正在尝试使用HTML5画布绘制一系列程序生成的颜色。它应该在原点显示黑色，在距离原点最远的角落显示白色，在剩余的角落显示相反的黄色和紫色，中间有各种红色。

这是我手工制作的低分辨率版本。在我的系统中，Y轴与画布的Y轴相反，但这对我来说并不重要，只有生成的颜色很重要。同样在我的系统中，颜色通道的浮点数介于0和1之间，而不是0和255，而坐标的范围是0到1，而不是0到255.

这是代码 - 除以255是为了说明事实x和y从0到255而不是0到1，除以65025只是255 ^ 2，以说明事实x和y都涉及，乘以255是因为颜色通道从0到255，而不是0到1。

<canvas id = "mainCanvas" width="256" height="256"><p>Your browser doesn't support canvas.</p></canvas>
<script>
function drawPix(x, y, r, g, b) {
    if (r > 255) {
        r = 255;
    }
    if (g < 0) {
        g = 0;
    }
    if (b < 0) {
        b = 0;
    }
    var c = document.getElementById("mainCanvas").getContext("2d");
    c.beginPath();
    c.moveTo(x, y);
    c.lineTo(x + 1, y + 1);
    c.closePath();
    var style = "rgb(" + r + ", " + g + ", " + b + ")";
    c.strokeStyle = style;
    c.stroke();
}

for (var x = 0; x <= 255; x++) {
    for (var y = 0; y <= 255; y++) {
        drawPix(x, y, x + y, ((2*x/255.0) - (x*y/65025.0) + (y/255.0) - 1) * 255, ((2*y/255.0) - (x*y/65025.0) + (x/255.0) - 1) * 255);
    }
}
</script>

我在OS X上使用Chrome，Firefox和Safari以及Windows 7上的Chrome进行了检查，并且所有这些都在右侧输出了带有奇怪紫色条纹的图像，而左下角则没有像它应该的紫色领域。

我尝试检查日志，但是在每个坐标处打印每种颜色的信息海洋中丢失了，所以我只输出了下面的1/2 225的输出。朝向右侧的奇怪的紫色条纹仍然出现在由下面的代码生成的画布中，但没有迹象表明蓝色通道在控制台中具有如此低的y值。

<canvas id = "mainCanvas" width="256" height="256"><p>Your browser doesn't support canvas.</p></canvas>
<script>
function drawPix(x, y, r, g, b) {
    if (r > 255) {
        r = 255;
    }
    if (g < 0) {
        g = 0;
    }
    if (b < 0) {
        b = 0;
    }
    if (x % 15 == 0 && y % 15 == 0) {
        var c = document.getElementById("mainCanvas").getContext("2d");
        c.beginPath();
        c.moveTo(x, y);
        c.lineTo(x + 15, y + 15);
        c.closePath();
        var style = "rgb(" + r + ", " + g + ", " + b + ")";
        console.log("X: " + x + " Y: " + y + ", " + style);
        c.strokeStyle = style;
        c.stroke();
    }
}

for (var x = 0; x <= 255; x++) {
    for (var y = 0; y <= 255; y++) {
        drawPix(x, y, x + y, ((2*x/255.0) - (x*y/65025.0) + (y/255.0) - 1) * 255, ((2*y/255.0) - (x*y/65025.0) + (x/255.0) - 1) * 255);
    }
}
</script>

这是我的代码的JSFiddle，如果这有助于你帮助我： http://jsfiddle.net/ArtOfWarfare/wjzhnhy8/

Answer 1

rgb()似乎不接受小数。

请改用：

var style = "rgb(" + r.toFixed(0) + ", " + g.toFixed(0) + ", " + b.toFixed(0) + ")";