HTML5:由于宽度和高度的原因,画布圆是椭圆形的
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
画布的
.width
和.height
属性独立于同名的 CSS 属性。CSS 属性设置可见大小,但元素属性设置坐标空间。
您应该直接设置宽度和高度属性:
理想情况下将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:
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.
您需要指定
px
。You need to specify
px
.