Bootstrap 3模糊了我的畫布

Question

我正在開發一個使用畫布繪製組織圖的Web應用程序，並且我已經使用bootstrap 2.3沒有問題。幾天前，我升級到引導程序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

由於在評論我看着CSS屬性和通知箱尺寸應用爲邊界框任何標記與引導3.

我改變了它，現在在畫布上是完全@肯abdias軟件渲染。

canvas{ 
    box-sizing: content-box; 
}