캔버스 요소의 너비와 높이를 올바르게 가져 오기

Question

캔버스 요소의 너비와 높이를 올바르게 설정하는 데 어려움이 있습니다.

나는 볼을 가지고 있는데, 화면의 경계에 도달 할 때마다 수직 속도를 변경하여 튀어 나오고 싶습니다. 그것은 작동하지만, 화면의 가장자리에 부딪히자 마자 뒤로 이동하는 대신 2 초 동안 진행되고 그 다음으로 돌아갑니다.

이

var left = 0, 
    right = canvas.width, 
    top = 0, 
    bottom = canvas.height; 

내 볼의 X 또는 Y 위치는 이러한 경계 외부, 속도가 부정적 일 변경해야하는 경우 : 나는 뷰포트의 크기를 결정하기 위해 이러한 변수를 가지고있다. 그러나 내 애니메이션 동안 console.log는 x 위치이고 화면의 오른쪽 가장자리에 도달 할 때까지는 값이 약 600입니다. 이는 제가 1366x768px 모니터를 사용하고 있기 때문에 실제로 이상합니다.

또한 왼쪽 화면 가장자리까지 완전히 도달하지는 않지만 50px처럼 튀어 오릅니다.

나는 꽤 오랫동안 이것에 붙어 있었기 때문에 모든 아이디어는 정말 감사하겠습니다. http://codepen.io/gbnikolov/pen/puiwk

Answer 1

업데이트 다음과 드로우 :

는 현재 작업 예제를 볼 수 있습니다.

Ball.prototype.draw = function(ctx) { 
    ctx.save(); 
    // you've translated to the x and y position of the ball. 
    ctx.translate(this.x, this.y); 
    ctx.rotate(this.rotation); 
    ctx.scale(this.scaleX, this.scaleY); 
    ctx.lineWidth = this.lineWidth; 
    ctx.fillStyle = this.color; 
    ctx.strokeStyle = this.strokeColor; 
    ctx.beginPath(); 
    // Draw at 0,0 since we are already translated to the x and y. 
    ctx.arc(0, 0, this.radius, 0, Math.PI * 2, true); 
    ctx.closePath(); 
    ctx.fill(); 
    ctx.stroke(); 
    ctx.restore(); 
} 

Live Demo

귀하의 문제는 당신이 컨텍스트를 번역하고 당신이 20 번역 그래서 만약 다음에 대해 20 공의 x와 y의 아크을 추첨 방법에 예를 들어 20시 20 분에 그릴 때 공은 실제로 40시 40 분입니다.