css - Bootstrap 3 模糊了我的画布

Question

我正在开发一个使用画布绘制组织结构图的网络应用程序，并且我使用 bootstrap 2.3 没有问题。几天前，我升级到 bootstrap 3，现在我在画布上看到了模糊。让图像说话：

<- 使用引导程序 3

<- 没有引导程序 3

我真的不想降级，因为它不是微不足道的，因为我喜欢新版本，但我怎么知道问题出在哪里？有没有办法告诉 css 应用于画布元素？它们由第三方编译的 js 库在后台管理。

谢谢！

Answer 1

您可以检查画布的属性className以查看是否设置了类：

var canvas = document.getElementById('myCanvas);

if (canvas.className.length > 0) alert('CSS class set');

或者您可以请求属性并进行比较（类似这样）：

var w = canvas.style.getPropertyValue('width')||0,
    h = canvas.style.getPropertyValue('height')||0;

if (w > 0 && w !== canvas.width) canvas.width = w;
if (h > 0 && h !== canvas.height) canvas.height = h;

如果插值处于活动状态（默认）并且 CSS 尺寸与画布的实际尺寸不同，CSS 将影响画布 - 就像它对图像所做的那样。

因此，可能有一些盒子大小与引导带活动结合使用填充/边框或其他一些影响大小并因此激活插值/子像素的样式。

Answer 2

感谢@ken-abdias-software 的评论，我查看了 css 属性并注意到 box-sizing 作为边框框应用于任何带有 bootstrap 3 的标签。

我改变了它，现在画布被完美地渲染了。

canvas{
  box-sizing: content-box;
}