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

我正在尝试使用HTML5画布绘制程序生成的颜色的正方形。它应在原点处显示黑色，在距原点最远的拐角处显示白色，在其余拐角处彼此相对的黄色和紫色，中间显示各种红色。

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

Here's the code - dividing by 255 is to account for the fact x and y go from 0 to 255 rather than 0 to 1, dividing by 65025 is just 255^2, to account for the fact x and y are both involved, and multiplying by 255 is because the color channels go from 0 to 255, rather than 0 to 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>

I checked this with Chrome, Firefox, and Safari on OS X, plus with Chrome on Windows 7, and all of them output this image with weird streaks of purple on the right side, and the bottom left corner doesn't have a field of purple like it should.

我尝试检查日志，但迷失在大量信息的打印中，每个坐标处打印每种颜色，因此我只将其输出为下面的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/