画布宽度更改时画布线宽会发生变化

Question

我不知道是否会有解决方案。

我有一个canvas元素，我希望改变它的宽度。我知道，这很容易，但是当宽度变化时，当宽度变窄或变宽时，图中的线条也变得更薄/更厚。

我可以通过重新绘制图像并使用缩放和lineWidth等来解决这个问题，但我不想每次宽度改变时重新绘制（我使用setInterval更改宽度，所以我不喜欢认为重新绘制每40-50 - 或更少 - 毫秒是一个合理/可行的解决方案）。

有人能想出解决这个问题的方法吗？

一个简单的解释，我有：

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

因此，当画布的宽度发生变化时，lineWidth会变得小于1像素，直到它变得“破碎”并消失。

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

ADDITION *** 我用它来改变宽度，希望它有意义：

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

我检查当鼠标位于画布的右边缘时，然后在“mousedown”上原始宽度，borderRight，borderLeft，mouseX和clickX设置在转发器之外，以便鼠标左右移动宽度增加/减少。当然，间隔在“mouseup”上被清除。

谢谢，迈克

Answer 1

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

改为更改画布HTML节点的width和height属性。