在画布上画线 - 意外的比例

Question

我有一个很难描述/呈现的问题，因为这部分代码深入我的 Angular 应用程序中。

无论如何，我有一个 350px x 350px 的 div，我会用画布覆盖它，并在上面画一条线。

我做了什么？我在表格之前创建了一个画布标签并应用了这个 CSS 规则：

canvas{
  position: absolute;
  width: 350px;
  height: 350px;
  border: dotted black 2px; <-- only for visual effect
}

它覆盖了 div。

接下来我尝试画一条简单的线来测试它（我在这里错过了下载对画布的引用的部分代码，因为它可以工作）：

const ctx = canvasNativeEl.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

我希望得到一个正方形的对角线。不幸的是，我得到了矩形的对角线，如下所示：

这个问题不允许我画目标线，因为坐标是错误的。

如果您有任何想法，我很乐意看到。 问候！

Answer 1

正如我所解释的in a previous question 问题是在画布上使用宽度/高度属性会产生缩放效果。这是一个之前/之后，以便更好地了解您的问题：

canvasNativeEl = document.querySelectorAll('canvas');

let ctx = canvasNativeEl[0].getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

ctx = canvasNativeEl[1].getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

canvas{
  border: dotted black 2px;
}

<canvas></canvas>
<canvas style="width: 350px;height: 350px;"></canvas>

如您所见，第二个画布是第一个画布的缩放版本。就好像我们在考虑第一个的情况下正确绘制了我们的线，然后我们更改宽度/高度以获得第二个。

为了避免这种情况，您应该考虑高度/宽度属性具有正确的坐标并避免缩放效果

canvasNativeEl = document.querySelectorAll('canvas');

let ctx = canvasNativeEl[0].getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

ctx = canvasNativeEl[1].getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stroke();

canvas{
  border: dotted black 2px;
}

<canvas></canvas>
<canvas width='350' height="350" ></canvas>