Question

我想在我的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?

由于

Answer 1

（令人惊讶的）

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

Answer 2

使用画布宽度和高度方法

var width = c.width;
var height = c.height;

如何获得画布的宽度/高度？

2 个答案: