HTML5 Canvas 绘图中的奇怪条纹？

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/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) + ")";