jquery - HTML5 : Canvas circle is oval because of width and height

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 时， Canvas 的实际 高度不是我设置的使用 jquery 函数。有谁知道我怎么不能使用 canvas.width = 400; 并使用 propery jquery 函数？

Answer 1

Canvas 的 .width 和 .height 属性独立于同名的 CSS 属性。

CSS 属性设置可见尺寸，而元素属性设置坐标空间。

您应该直接设置宽度和高度属性:

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

理想情况下，将 CSS 属性设置为相同，这是任何情况下的默认设置，除非特别更改。

这可确保您的坐标系保持一致。如果它们不相同，则浏览器将应用缩放以从一个坐标系映射到另一个坐标系，并且您还必须应用自己的缩放以将事件坐标映射到像素坐标。