使用css设置画布宽度和高度会移动笔

Question

当我用css设置画布宽度和高度时，笔正在移动。在浏览器中放大/缩小（铬）后，笔不再移动。 我正在使用字面上的canvas小部件，并希望将画布适合其父div。初始化画布后，我使用jquery css函数设置画布的宽度/高度。但是我的笔不在同一个坐标上。在我当前的浏览器中滚动或滚出后，笔位于我的鼠标指针所在的坐标处。任何人都可以帮助我吗？

$('.lc-drawing').find('canvas').css({'width':containerWidth, 'height':containerWidth});

Answer 1

使用画布时，您通常会发现需要正常设置宽度和高度属性，而不是css /样式宽度和高度。

我的代码共享示例是尝试：

$('.lc-drawing').find('canvas').attr('width', containerWidth).attr('height', containerWidth);

你能否确认你打算设置＆＃34; containerWidth＆＃34;画布的高度和宽度？

关于调整画布大小，请考虑添加一些这样的响应式CSS，以维护位置值，但为移动设备调整大小。

canvas {
  width: 100%;
  height: auto;
}

尽管如此，您仍然需要画布本身的宽度和高度属性。