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：画布圈为椭圆形，因为宽度和高度

回答

相关问题