使用CSS设置画布的宽度和高度可移动笔

Question

当我使用CSS设置画布的宽度和高度时，笔会发出蜂鸣声。 在浏览器（铬）中放大/缩小后，笔不再移动。 我正在使用字面意义上的画布小部件，并希望将画布适合其父div。 初始化画布后，我使用jquery css函数设置画布的宽度/高度。 但是我的笔不在同一坐标上。 在当前浏览器中滚动或滚动后，笔位于鼠标指针所在的坐标处。 谁能帮我？

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

Answer 1

使用画布时，通常会发现您实际上需要正常地实际设置width和height属性，而不是css / style的width和heights。

与您共享代码的示例将尝试：

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

您还可以确认要为画布的高度和宽度设置“ containerWidth”吗？

关于调整画布的大小，请考虑添加这样的自适应CSS，以保持位置值，但调整移动设备的大小。

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

但是，您仍然需要画布本身的width和height属性。