javascript - HTML5キャンバスでの色のブレンドの回避

Question

html5キャンバス要素で2つの長方形を描画しています。長方形aのエッジの1つは、長方形bのエッジにあります。

長方形aは緑、長方形bは青です。

その結果、共通のエッジは青でも緑でもありません。その色は2つのブレンドです。

globalCompositeOperationをソースオーバーに設定しようとしましたが、役に立ちませんでした。

Answer 1

これは、線が複数の画面ピクセルにわたって描画されるためです。

描画モデルは float 座標に基づいており、丸められた値は画面のピクセル間にあります。

そのブレンドを避けるために、線幅が常に座標で 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);