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

Answer 1

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

CSS属性设置可见大小,但元素属性设置坐标空间.

您应该直接设置width和height属性:

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

理想情况下,将CSS属性设置为相同,除非特别更改,否则这是任何事件中的默认值.

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