javascript - 当 Canvas 宽度改变时， Canvas 线宽也会改变

Question

不知道有没有办法解决这个问题

我有一个 Canvas 元素，我希望更改其宽度。我知道，这很容易，但是当宽度改变时，当宽度变窄/变宽时，绘图中的线条也会变细/变粗。

我可能可以通过重新绘制图像并使用缩放和 lineWidth 等来解决这个问题，但我不想每次宽度变化时都重新绘制(我正在使用 setInterval 更改宽度，所以我不'不要认为每 40-50 毫秒或更短时间重绘一次是合理/可行的解决方案)。

谁能想出一种方法来解决这个问题吗？

一个简单的解释，我有:

ctx.beginPath()
ctx.strokeStyle="#000000";
ctx.lineWidth=1;
ctx.strokeRect(10, 10, 400, 400);

因此，当 Canvas 的宽度发生变化时，lineWidth 会变得小于 1 像素，甚至会“ splinter ”并消失。

在写这个问题时，我越来越认为唯一的解决方案是重新绘制图像，但请让我知道您的想法。

添加***我用它来改变宽度，希望它有意义:

repeater = setInterval(function() {
    $(".action").css("width", originalWidth - borderRight - borderLeft + (mouseX - clickX));
}, 40);

我检查鼠标何时位于 Canvas 的右边缘，然后在“mousedown”上，originalWidth、borderRight、borderLeft、mouseX 和 clickX 设置在中继器之外，因此当鼠标向左和向右移动时，宽度会增加/减少。当然，通过“鼠标松开”可以清除间隔。

谢谢，迈克

Answer 1

不要使用 CSS 重新缩放 Canvas 。使用 CSS 时，您可以缩放 HTML 布局中 Canvas 的输出，但不会更改内部分辨率。

改为更改 Canvas HTML 节点的宽度和高度属性。