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

Question

当我使用 css 设置画布宽度和高度时，笔正在移动。在浏览器（铬）中放大/缩小后，笔不再移动。 我正在使用字面上的画布小部件，并希望使画布适合其父 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);

您能否确认您打算为画布的高度和宽度设置“containerWidth”？

关于调整画布大小，请考虑添加一些像这样的响应式 CSS，以保持位置值，但要针对移动设备调整大小。

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

您仍然需要画布本身的宽度和高度属性。