javascript - 避免 HTML5 画布中的颜色混合

Question

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

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

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

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

Answer 1

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

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

为避免这种混合，请始终在坐标处绘制线宽为一个像素的线条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);