javascript - 避免在 HTML5 Canvas 中混合颜色

Question

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

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

结果是公共(public)边既不是蓝色也不是绿色:它的颜色是两者的某种混合。

我尝试将 globalCompositeOperation 设置为 source over，但没有帮助。

Answer 1

那是因为在不止一个屏幕像素上绘制了线条。

绘图模型基于浮点坐标，舍入值在屏幕像素之间。

为避免混合，请始终在坐标 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);