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

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

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

来源

2016-07-06 Muhammet Tasan

你可以分享你的笔的链接？ – Pugazh

用帆布你通常找到你需要实际设置宽度和高度通常属性，而不是CSS /风格的宽度和高度。

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

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

您也可以确认您打算设置“containerWidth”为画布的高度和宽度？

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

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

尽管如此，您仍然需要宽度和高度属性。

来源

2016-07-06 14:52:31 mattpark22

非常感谢！花了很多时间（在发布这个问题之前），我已经解决了我的问题。目标是，我想覆盖已经设置'样式'属性的画布。我试图覆盖样式属性值，我也用attr（）函数设置了宽度和高度。我的错误如下：我必须首先删除任何包含画布宽度和高度的内联样式属性。所以删除它们之后，我可以设置高度和宽度属性以及画布的正确尺寸。 –

但问题仍然存在于移动模式。我在我的手机上甚至在Chrome开发者工具（移动模式）上测试过它。笔仍然移动。你能帮助解决这个问题吗？ –

我已经添加了一些CSS来协助在移动模式下的画布 - 对我上面的帖子，希望这对您的解决方案有用。 – mattpark22

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

回答

相关问题