HTML5：畫布圈爲橢圓形，因爲寬度和高度

var qcanvas = $('#canvas'); 
var canvas = ctl_canvas[0]; 
var context = canvas.getContext('2d'); 
qcanvas.css('border', '1px solid black'); 
qcanvas.css('width', 400); 
qcanvas.css('height', 75);

的當我使用上述qcanvas.css('width', 400);和各自的高度的CSS，畫布的實際高度不是我將其設置爲使用jQuery功能。有誰知道我不能使用canvas.width = 400;並使用jpeery功能？HTML5：畫布圈爲橢圓形，因爲寬度和高度

來源

2012-01-18 Brian Graham

.width和.height畫布的屬性獨立於相同名稱的CSS屬性。

CSS屬性設置可見大小，但元素屬性設置座標空間。

您應該直接設定的寬度和高度屬性：

qcanvas.width = 400; 
qcanvas.height = 75;

理想地設置的CSS屬性到相同的，這是在任何情況下，默認除非特別改變。

這可確保您的座標系統一致。如果它們不相同，那麼瀏覽器將應用縮放以從一個座標系映射到另一個座標系，並且還必須應用您自己的縮放比例來將事件座標映射到像素座標。

來源

2012-01-18 15:56:49 Alnitak

設置這兩個屬性解決了我的問題，以及我以前的問題！ :) – 2012-01-18 16:04:04

@BrianGraham通常可以放棄CSS屬性。 – Alnitak 2012-01-18 16:14:13

qcanvas.css('width', '400px'); 
qcanvas.css('height', '75px');

您需要指定px。

來源

2012-01-18 15:55:33 Znarkus

另一種方式是'qcanvas.width（400）.height（75）'。 – Znarkus 2012-01-18 15:56:27

HTML5：畫布圈爲橢圓形，因爲寬度和高度

回答

相關問題