Javascript 避免HTML5画布中的颜色混合

我正在html5画布元素中绘制两个矩形。矩形a上的一条边位于矩形b的边上

矩形a为绿色，矩形b为蓝色

结果是公共边既不是蓝色也不是绿色：其颜色是两者的某种混合

我尝试将globalCompositeOperation设置为源代码结束，但没有帮助

---

这是因为线条绘制在多个屏幕像素上

图形模型基于浮动坐标，四舍五入值在屏幕像素之间

为了避免这种混合，请始终在坐标

Math.round（x）+0.5

处绘制线宽为一个像素的线

这是一张照片

下面是我用来帮助绘制细线和矩形的一些代码：

function drawThinHorizontalLine(c, x1, x2, y) {
    c.lineWidth = 1;
    var adaptedY = Math.floor(y)+0.5;
    c.beginPath();
    c.moveTo(x1, adaptedY);
    c.lineTo(x2, adaptedY);
    c.stroke();
}

function drawThinVerticalLine(c, x, y1, y2) {
    c.lineWidth = 1;
    var adaptedX = Math.floor(x)+0.5;
    c.beginPath();
    c.moveTo(adaptedX, y1);
    c.lineTo(adaptedX, y2);
    c.stroke();
}

function Rect(x,y,w,h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
}

Rect.prototype.drawThin = function(context) {
    drawThinHorizontalLine(context, this.x, this.x+this.w, this.y);
    drawThinHorizontalLine(context, this.x, this.x+this.w, this.y+this.h);
    drawThinVerticalLine(context, this.x, this.y, this.y+this.h);
    drawThinVerticalLine(context, this.x+this.w, this.y, this.y+this.h);
}

例如：

context.strokeColor = 'red';
var r = new Rect(20, 23, 433, 14);
r.drawThin(context);

---

如果矩形旋转会怎么样？然后，就像线条一样，会与背景稍微混合，但效果通常比水平线或垂直线更难注意。