3

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

谢谢

4

2 回答 2

3

这是（令人惊讶的）

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

于 2012-08-01T11:05:42.710 回答
0

使用画布宽度和高度方法

var width = c.width;
var height = c.height;
于 2012-07-31T23:06:43.363 回答