Javascript畫布。 固定線寬與轉換無關

Question

我試圖在一個簡單的（x，y）平面上繪制圖形。

我正在使用畫布變換來變換我的坐標系。

我正在尋找一種將“線寬”繪制為與x / y比例無關的固定像素寬度的方法。

問題是，當x / y大時，沿x或y的線寬消失或變形，因為線寬是相對於x和y比例縮放的。

參見示例：

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var y_scale=10
ctx.transform(1, 0, 0, 1/y_scale, 0, 0);
ctx.lineWidth = 10;
ctx.strokeRect(20, 20, 80, 100*y_scale);

有沒有一種方法可以固定寬度而不依賴於變換？

當然我可以做自己的變換矩陣，但是我不願意。

Answer 1

相同的問題： html5 canvas防止線寬縮放

解：

1. 應用轉換
2. 定義路徑
3. 恢復轉換
4. 行程路徑

碼：

var y_scale=10;

ctx.beginPath();
ctx.save(); //save context
ctx.transform(1, 0, 0, 1 / y_scale, 0, 0);
ctx.rect(20, 20, 80, 100 * y_scale); // define rect
ctx.restore(); //restore context 

ctx.lineWidth = 10;
ctx.stroke(); //stroke path

查看范例： https ： //jsfiddle.net/aj3sn7yv/2/

Answer 2

除了縮放上下文，您還可以縮放點序列-不需要完整的矩陣解決方案。 這樣，您只是在更改“路徑”，而不是渲染結果。

var scale = 10;
var newPoints = scalePoints(points, scale);  // scale or inverse: 1/scale

... plot new points here at the line-width you wish

// example function
function scalePoints(points, scale) {
    var newPoints = [];
    points.forEach(function(p) { newPoints.push(p * scale) });
    return newPoints
}

根據需要進行修改。