不知道有没有办法解决这个问题
我有一个 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 设置在中继器之外,因此当鼠标向左和向右移动时,宽度会增加/减少。当然,通过“鼠标松开”可以清除间隔。
谢谢,迈克
最佳答案
不要使用 CSS 重新缩放 Canvas 。使用 CSS 时,您可以缩放 HTML 布局中 Canvas 的输出,但不会更改内部分辨率。
改为更改 Canvas HTML 节点的宽度和高度属性。
关于javascript - 当 Canvas 宽度改变时, Canvas 线宽也会改变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32807264/