如何获取画布的宽/高？
如何获取画布的宽/高？
提问于 2012-08-01 07:01:29
我想在我的html页面上有一个画布，宽度= 100%。然后我想在运行时获得画布的像素宽度。类似于：
Canvas c = Canvas.createIfSupported();
c.setWidth("100%");
c.setHeight("100%");
// let's draw a rectangle to fill the whole canvas:
c.getContext2d().rect(0, 0, ?, ?); // <-- what's its actual width/height?谢谢
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-08-01 19:05:43
是(令人惊讶的)
c.getContext2d().rect(0, 0, 299, 149);..。无论画布的实际像素大小是多少。原因是，300x150是默认坐标空间大小，请参阅http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element
您可以使用canvas.setCoordinateSpaceWidth()和canvas.setCoordinateSpaceHeight()将其更改为您想要的任何内容。
通常，人们希望独立于画布的实际大小进行绘制，因此他们只需将坐标空间设置为类似于100x100的值，然后绘制的图像就会自动缩放。
但是，您可能希望了解有关实际画布像素大小的信息：
Scheduler.get().scheduleDeferred(new ScheduledCommand() {
@Override
public void execute() {
final int clientWidth = canvas.getElement().getClientWidth();
final int clientHeight = canvas.getElement().getClientHeight();
setupCoordinateSpace(canvas, clientWidth, clientHeight);
drawMyImage(canvas);
}
});请注意，这必须在scheduleDeferred中完成，因为只有在浏览器有机会执行布局之后，才能知道客户端大小。
您可以使用此信息来调整纵横比以匹配画布(我建议这样做，否则会得到失真的图像)
void setupCoordinateSpace(Canvas canvas, int clientWidth, int clientHeight) {
final double aspect = (double) clientWidth / (double) clientHeight;
canvas.setCoordinateSpaceHeight(
(int) (myCoordinateSpaceWidth / aspect));
}或者，您也可以将坐标空间设置为与像素大小相匹配，以便可以在HTML5画布上执行像素精确绘制：
void setupCoordinateSpace(Canvas canvas, int clientWidth, int clientHeight) {
canvas.setCoordinateSpaceWidth(clientWidth);
canvas.setCoordinateSpaceHeight(clientHeight);
}设置好坐标空间后，可以调用drawMyImage()
Stack Overflow用户
发布于 2012-08-01 07:06:43
使用画布宽度和高度方法
var width = c.width;
var height = c.height;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11750268
复制相关文章
相似问题
腾讯云开发者
