캔버스의 너비/높이를 얻는 방법?

Question

너비 = 100 % 인 html 페이지에 캔버스를 갖고 싶습니다. 런타임에 캔버스의 픽셀 너비를 얻고 싶습니다. 뭔가 같은 :

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가 공간을 크기를 조정 당신은 당신이 원하는 무엇이든에 canvas.setCoordinateSpaceWidth() 및 canvas.setCoordinateSpaceHeight()를 사용하여 변경할 수 있습니다 http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#the-canvas-element

참조 기본이라고한다.

사람들은 실제로 캔버스의 실제 크기와 무관하게 그리기를 원하므로 좌표 공간을 100x100과 같이 설정하고 그려진 이미지는 자동으로 크기가 조정됩니다. 브라우저가 기회를 가졌 후 클라이언트 크기 만 알 수 있기 때문에 이것은, scheduleDeferred에서 수행되어야 함을,

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); 
    } 
}); 

참고 :

그러나 실제 캔버스 픽셀 크기에 대해 알아 할 수 있습니다 레이아웃을 수행합니다.

당신은 또는, (그렇지 않으면 당신은 왜곡 된 이미지를 얻을 수 있기 때문에, 내가 추천 할 것) 캔버스에 맞게 화면 비율을 조정

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;