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 函数?
最佳答案
Canvas 的 .width
和 .height
属性独立于同名的 CSS 属性。
CSS 属性设置可见尺寸,而元素属性设置坐标空间。
您应该直接设置宽度和高度属性:
qcanvas.width = 400;
qcanvas.height = 75;
理想情况下,将 CSS 属性设置为相同,这是任何情况下的默认设置,除非特别更改。
这可确保您的坐标系保持一致。如果它们不相同,则浏览器将应用缩放以从一个坐标系映射到另一个坐标系,并且您还必须应用自己的缩放以将事件坐标映射到像素坐标。
关于jquery - HTML5 : Canvas circle is oval because of width and height,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8913135/