使用外部css文件時畫布圖像大小錯誤

Question

我正在使用HTML5 canvas元素。我使用以下javascript在畫布上繪製圖像：

var img = new Image(); 
var canvas = this.e; 
var ctx = canvas.getContext('2d'); 
img.src = options.imageSrc; 
img.onload = function() { 
    ctx.drawImage(img,0,0); 
} 

這很好。不過，我遇到了一些奇怪的CSS問題。當我使用內聯CSS像下面的圖像完美地擴展畫布：

<canvas id="canvas" width="800" height="448"></canvas> 

然而，當我刪除內聯CSS和使用外部CSS文件中的圖像繪製過大畫布，只有我看到圖像的左上角。這裏是CSS我使用：

#canvas { 
    height:448px; 
    width:800px; 
    border:none; 
} 

當我使用內聯CSS是繪製圖像某種程度上繼承從畫布的CSS？不知道這裏發生了什麼，但我想使用外部的CSS文件。

編輯 如果我沒有提供畫布元素的樣式，它更小，但仍然只顯示圖像的頂角。當我使用CSS文件進行樣式設置時，畫布更大，但它好像只是放大圖像。顯示的圖像數量相同，現在只是更大。

編輯2 根據收到的答案，我現在正在用javascript調整canvas的dom大小。我改變了我的img.onload功能如下：

img.onload = function() { 
    if (options.imageWidth == 0 && options.imageHeight == 0) { 
     canvas.height = this.height; 
     canvas.width = this.width; 
    } else { 
     canvas.height = options.imageHeight; 
     canvas.width = options.imageWidth; 
    } 
    ctx.drawImage(img,0,0); 
} 

Answer 1

粗布有兩種尺寸 - 實際像素網格大小（在width和height屬性）和CSS大小。

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

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

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

var img = new Image(); 
var canvas = this.e; 
var ctx = canvas.getContext('2d'); 
img.src = options.imageSrc; 
img.onload = function() { 
    canvas.width = this.width; // new code 
    canvas.height = this.height; // " 
    ctx.drawImage(img, 0, 0); 
} 

Answer 2

嘗試把重要的你的外在風格，可能是東西是壓倒一切的，但是它內聯最後覆蓋！

#canvas { 
    height:448px !important; 
    width:800px !important; 
    border:none !important; 
}