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()これは、 andを使用して好きなように変更でき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 に答える