如何获取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的宽度/高度？

回答

相关问题