如何獲取Canvas的寬度/高度？

我想在我的HTML頁面上有一個畫布，寬度= 100％。然後我想在運行時獲取畫布的像素寬度。喜歡的東西：如何獲取Canvas的寬度/高度？

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?

感謝

來源

2012-07-31 user291701

這是（奇怪）

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-01 11:05:42

感謝Chris的出色答案，非常有意義。如果用戶在運行時改變了瀏覽器的大小，我應該更新座標空間，然後呢？（我認爲這是一個onWindowSizeChanged監聽器）。謝謝！ – user291701 2012-08-01 13:52:53

@briceshatzer你能詳細說明一下嗎？ – 2017-01-15 14:03:10

使用畫布寬度和高度方法

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

來源

2012-07-31 23:06:43

正確，但由於我將寬度/高度指定爲「100％」，這似乎不起作用？我想知道瀏覽器完成將畫布充氣至100％寬度/高度後的大小（以像素爲單位）。 – user291701 2012-08-01 04:16:55

如何獲取Canvas的寬度/高度？

回答

相關問題