HTML5:由于宽度和高度的原因,画布圆是椭圆形的

发布于 2024-12-27 11:17:14 字数 372 浏览 0 评论 0原文

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; 并使用属性 jquery 函数?

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);

When I use the above qcanvas.css('width', 400); and respective height css, the actual height of the canvas is not what I set it to using the jquery functions. Does anyone know how I can not use canvas.width = 400; and use the propery jquery functions?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

海未深 2025-01-03 11:17:14

画布的 .width.height 属性独立于同名的 CSS 属性。

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

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

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

理想情况下将CSS属性设置为相同的,除非特别更改,否则在任何情况下都是默认值。

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

The .width and .height properties of a canvas are independent of the CSS properties of the same name.

The CSS properties set the visible size, but the element properties set the coordinate space.

You should set the width and height properties directly:

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

Ideally set the CSS properties to the same, which is the default in any event unless specifically changed.

This ensures that your coordinate systems are consistent. If they're not the same then the browser will apply scaling to map from one coordinate system to the other, and you would also have to apply your own scaling to map event coordinates to pixel coordinates.

轻许诺言 2025-01-03 11:17:14
qcanvas.css('width', '400px');
qcanvas.css('height', '75px');

您需要指定px

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

You need to specify px.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文