HTML5 캔버스 그리기 및 업데이트

Question

제목이 얼마나 막연한 지 미안하지만, 내가 묻는 것을 요약하는 방법을 완전히 모르겠습니다.

첫째로, 여기 내가 지금까지 가지고있는 것의 jsFiddle입니다.

js OOP를 사용하는 것뿐만 아니라 HTML5 캔버스 요소를 사용하는 법을 배우기 시작했습니다.

바이올린에서 볼 수 있듯이 사각형 클래스를 만들면 중복되도록 생각할 수도 있지만되도록 많은 사각형을 만들 수 있습니다. 그리면 참조 할 수 있습니다. 그러나 height = width을 설정하면 항상 비 정사각형이됩니다. 나는 캔버스를 사용하는 것에 비교적 익숙하지만 사각형의 높이와 너비가 캔버스 요소의 크기에 비례하므로 캔버스 요소의 높이와 너비가 비례해서는 안되기 때문에 (그 반대의 경우 할당 된 백분율 값이므로 명확한 픽셀로).

사각형의 크기를 픽셀로 설정하여 문제를 해결할 수 있지만 키 누르기 이벤트가 호출되면 사각형이 전혀 움직이지 않습니다.

또한 사용자가 키 누르기 이벤트를 사용하여 화살표 키로 사각형을 이동할 수 있습니다. 그러나 위/아래 키 값은 코드에서 반전시킬 때도 반전 된 것처럼 보입니다. 그리고 왼쪽/오른쪽 키는 아무 것도하지 않습니까?

그리고 광장을 한 번 위/아래로 움직일 수 있습니까? 사용자 코드가 해당 버튼을 계속 누르고있는 한 내 코드에서 x/y 값을 늘릴 수 있어야합니까?

누군가가 이것을 점검하고 제가 잘못하고있는 것에 관해 어떤 조언을 해줄 수 있다면, 좋을 것입니다! 나는 이것에 많은 새로운 것을 시도하고 있습니다. 학습 경험으로, 그렇게 생각한다면, 배울 수 있도록 도와주세요!

Answer 1

캔버스의 크기를 조정할 때 종종 CSS가 사용되는 것을 경험했습니다. 캔버스 드로잉에 CSS를 사용하면 해상도를 변경하지 않고 크기를 조절할 수 있습니다. 해상도를 설정하려면 HTML에 width= 및 height= 속성을 사용하십시오.

움직임에 대해서는 keyup이 더 잘 작동하는 것처럼 보입니다. 그러나 up 키의 경우 y이 감소합니다 (상단은 0이고 하단은 양수입니다).

몇 가지 다른 점을 강조하고 싶습니다.

canvas을 컨텍스트의 변수 이름으로 사용하면 약간 모호합니다. 캔버스와 드로잉에 사용 된 컨텍스트간에 차이가 있습니다.

또한 ctx이없는 경우 //browser doesn't support html5이라고 말합니다.그러나 브라우저가 canvas/HTML5를 지원하지 않는 경우에는 .getContext('2d') 함수 호출이 해당 함수가 아니기 때문에 이미 실패합니다. else 문은 이 일 경우에만 실행되지만 무언가를 반환하지 않습니다. 아마도 그럴 수는 없을 것입니다.

빈 else 루프는 하나 매우 유용하지 않은,하지만 다치게하지 않습니다 :)

http://jsfiddle.net/DqrEm/4/

Answer 2

귀하의 문제는 사각형의 크기가 아니라 귀하의 canvas 크기에 달려 있습니다. 귀하의 jsfiddle에서, canvas 시작 줄을 <canvas id="practice" width="500" height="500">으로 바꿨을 때 사각형이 올바르게 그려졌습니다. CSS에서 width 및 height을 100 %에서 500px로 변경하려고했지만 사각형이 여전히 잘못 그려졌습니다.

업데이트 : 실제 canvas 태그에 100 %로 width 및 height 설정 (즉는 <canvas id="practice" width="100%" height="100%">)가 너무 작동합니다.