我的畫布獲取2個邊框而不是1個

我的頁面上有幾個畫布。他們都應該得到一個薄邊框，除了一個，應該有一個厚邊框。我想把所有的邊框信息放在HTML頭部的元素中。這裏是我的嘗試：我的畫布獲取2個邊框而不是1個

<style> 
/* The canvas with thick border has the id 'c' */ 
#c { border: 8px solid #8525AA; } 
canvas { border: 2px solid #5408FA; } 
</style>

這是我的HTML身體的摘錄：

<canvas id="filler" width="10" height="70"></canvas> 
<canvas id="c" width="400" height="200"> 
</canvas> 
<!-- more canvases follow here -->

現在的問題：有了這個代碼，ID爲「C」畫布增加了兩個邊界，一個厚厚的一和一個薄！這是預期的行爲？如果是的話，我該如何實現我的目標？

來源

2014-02-18 user1934428

哪個瀏覽器測試過了？ – anurupr

元素在理論上不可能有兩個邊框，所以這可能是您正在測試的特定瀏覽器版本中的一個錯誤。您是否嘗試了其他瀏覽器？我測試過的瀏覽器都沒有問題。（在Windows下，所有這些。） –

我只在Mac OSX 10.4上測試過，但使用各種瀏覽器（SeaMonkey 2.0，Opera 10.6，Safari 4）。他們都顯示了雙邊界。 – user1934428

首先的！

我將記錄下發生了什麼，以及我做了什麼錯誤。

我違反了舊規則，當縮小問題的範圍時，我應該刪除每一段不需要描述我的問題的代碼。在我的情況下，我的HTML文件中剩下兩行，我認爲它們不可能影響我的問題（因此我沒有在這裏發佈這些行）。好吧，我被咬這個時候：

我的HTML文件中的頭部還以下行有：

<script src="fabric_custom1.js"></script>

這將加載的fabrik.js一個子集，一個JavaScript庫，這使得畫布的處理變得容易。這本身並沒有做任何壞事。然而，在我的身體我也有線

<script>var canvas = new fabric.Canvas('c');</script>

這創建類型fabric.Canvas的一個目的，它提供了一個接口，用於操縱這是由ID「c」的前面定義的畫布。因爲我對這個東西沒有做任何事情，所以我認爲這個陳述不應該受到傷害，我也沒有打算去除它。

但事實證明，這條語句繪製了畫布的第二個邊界。我想這是Fabric.js中的一個錯誤。

對不起，打擾具有大家...

UPDATE：

我剛剛獲悉，雙邊框不是在fabric.js一個bug，但一個要素 - 它的設計以這種方式行事。爲了避免它，人們必須創建一個fabric.StaticCanvas而不是Fabric.Canvas。

來源

2014-02-26 16:17:08 user1934428

嘗試切換你的CSS是這樣的：

<style> 
/* The canvas with thick border has the id 'c' */ 
canvas { border: 2px solid #5408FA; } 
#c { border: 8px solid #8525AA; } 
</style>

來源

2014-02-18 09:55:56

我也試過，但效果相同。 – user1934428

如果您將有多個畫布，只有使用它們，一旦你用這樣的畫布，然後剛纔添加的特性是，

<canvas id="1" 
      style="border:2px solid #5408FA" 
      width="10px" 
      height="70px"> 

</canvas> 

<canvas id="2" 
      style="border:8px solid #8525AA" 
      width="400px" 
      height="200px"> 

</canvas>

如果你打算多次使用相同的屬性，那麼你可以設置屬性#canvas

但是！

畫布有兩種尺寸 - 實際像素網格尺寸（寬度和高度屬性）和CSS尺寸。

如果沒有指定像素大小，通常默認爲300x300。

CSS大小僅指定頁面中佔用的空間量，並且默認爲像素大小。如果不相等，圖像將被縮放。可恥的是我：

必須在元素中指定的像素大小，或使用Javascript設置：

來源

2014-02-18 17:51:52 wuno

我的畫布獲取2個邊框而不是1個

回答

相關問題