避免HTML5画布中的颜色混合

Question

我在html5 canvas元素中绘制了两个矩形。矩形a上的其中一条边位于矩形b的边上。

矩形a是绿色和矩形b是蓝色。

结果是共同的边缘既不是蓝色也不是绿色：它的颜色是两者的混合。

我试着设置globalCompositeOperation来源，但它没有帮助。

Answer 1

这是因为线drawed超过一个屏幕像素。

该绘图模型基于浮点坐标，取值范围为，屏幕像素点数为。

为了避免混合，总是在坐标Math.round(x)+0.5处绘制线宽为一个像素的线。

这里的a related answer带图片。

而这里的一些代码，我做，以帮助绘制细线条和矩形：

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);