HTML5: круг холста овален из-за ширины и высоты

Question

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, фактическая высота холста *1003* не соответствует той, которую я установил с помощью функций jquery. Кто-нибудь знает, как я не могу использовать canvas.width = 400; и использовать правильные функции jquery?

Answer 1

Свойства .width и .height холста не зависят от свойств CSS с тем же именем.

Свойства CSS задают видимый размер, но свойства элемента задают пространство координат.

Вы должны установить свойства ширины и высоты непосредственно:

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

В идеале установите свойства CSS на то же самое, что является значением по умолчанию в любом событии, если только специально не изменено.

Это обеспечивает согласованность ваших систем координат.Если они не одинаковы, браузер применяет масштабирование к карте из одной системы координат в другую, и вам также придется применять собственное масштабирование для сопоставления координат события с пиксельными координатами.

Answer 2

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

Вам необходимо указать px.