Question

我试图在简单的（x，y）平面上绘制图形。

我正在使用canvas变换来转换我的坐标系。

我正在寻找一种方法来绘制线宽＆＃39;作为固定的像素宽度，与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 prevent linewidth scaling

解决方案：

应用转化
定义路径
恢复转型
中风路径

代码：

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
}

根据需要进行修改。

Javascript画布。修复了与转换无关的线宽

2 个答案: