画布宽度改变时画布线宽改变答案

【问题标题】：Canvas Line Width changes when canvas width changes画布宽度改变时画布线宽改变
【发布时间】：2015-09-27 19:32:47
【问题描述】：

不知道有没有办法解决。

我有一个画布元素，我想改变它的宽度。我知道这很容易，但是当宽度改变时，当宽度变窄/变宽时，绘图中的线条也会变细/变粗。

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

任何人都可以想办法解决这个问题吗？

简单解释一下，我有：

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

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

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

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

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

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

谢谢，迈克

【问题讨论】：

如何改变画布的宽度？这样做有正确的方法和错误的方法。
好的，公平的评论！我正在使用 setInterval 并使用 jquery .css("width", newWidth) 更改宽度。这是我已经完成的自定义调整大小功能。我会更新我的问题，希望能解释得更好。

【解决方案1】：

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

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

【讨论】：

谢谢。您将如何更改 setInterval 函数？我已经尝试将 .css 更改为 .attr 并且还尝试了 document.getElementById("action").setAttribute("width", newWidth) - 在这种情况下，当然将“action”更改为 ID 而不是类 - 并且两者都做时，绘图似乎消失了？我是不是误会你了，你介意详细说明你的答案吗？如您所知，我不是这方面的专家。
虽然，在高度消失后登录到控制台时，高度已经改变，但是绘图不再存在......如果这有助于弄清楚我做错了什么？
@Mike，改变画布元素的宽度或高度会清除它，然后你需要重新绘制整个东西。但 Philipp 是对的，不要使用 CSS 来调整画布元素的大小。
@Mike 当您想保留画布时，您可以将内容绘制到屏幕外的画布上，并在调整大小后将其绘制回来。尽管取决于您构建应用程序的方式，重绘可能会更快。
@Kaiido - 好的，谢谢。那么唯一的解决方案就是重绘呢？我想尽量避免这样做，这就是为什么我的问题是问是否有其他方法。对不起，如果我有任何困惑，感谢您的帮助。