HTML5 Canvas를 사용하여 키보드 및 마우스 애니메이션을 만드는 예 공유_html5 튜토리얼 기술

공의 움직임을 키보드로 제어

우리 모두가 알고 있듯이, 우리가 보는 애니메이션은 사실 정적인 이미지가 빠르게 전환되는 일련의 과정으로, 시각적 잔상으로 인해 육안으로는 '움직이는 이미지'와 같은 시각적 효과를 줍니다. 이것을 이해하고 나면 캔버스에 애니메이션 효과를 그리는 것은 비교적 간단해집니다. 먼저 특정 정적 그래픽을 지운 다음 다른 위치에서 다시 그리면 정적 그래픽이 특정 궤적에 따라 이동하여 애니메이션 효과를 생성할 수 있습니다.

다음으로 캔버스에 단단한 공을 그린 다음 키보드의 화살표 키를 사용하여 공의 움직임을 제어하여 역동적인 효과를 만들어냅니다. 샘플 코드는 다음과 같습니다.

JavaScript 코드클립보드에 콘텐츠 복사

4. "UTF-8">
"moveBall(event)">
"myCanvas" width=
8. "400px" height="300px" style="테두리: 1px 단색 빨간색;"> 귀하의 브라우저가 캔버스 태그를 지원하지 않습니다.
9. 캔버스>
11. "텍스트/자바스크립트">
12. //캔버스 객체 가져오기(캔버스)
13. var canvas = document.getElementById("myCanvas");
//구체 클래스를 나타냅니다.
기능
16. 공(x, y, 반경, 속도){
this
17. .x = x || 10; //구체의 x 좌표, 기본값은 10
this
18. .y = y || 10; //구체의 y 좌표, 기본값은 10
this
19. .radius = radius || 10 //구체의 반경, 기본값은 10
이
20. .speed = 속도 || 5 //공의 이동 속도, 기본값은 5  
//위로 이동
이
23. .moveUp = 함수(){
이것
24. .y -= 이것.speed;  if
(
25. this.y //상한 초과 방지
                                                                                                                              
26.                                                         };
 
27. //오른쪽으로 이동
28. 이것
.moveRight =
29. 함수
(){
31. 이것.x = 이것
.speed;
32. var maxX = canvas.width - this.radius;
33. if(this.x > maxX){
 
34. //오른쪽 경계 초과 방지  이것
.x = maxX;
35. }
36. };
37.  
38. //왼쪽으로 이동
39. 이.moveLeft = 함수(){
40. 이.x -= 이.speed;
 
41. if(this.x //왼쪽 경계 초과 방지
42.  이것
.x =
43. 이것.radius;                                                          };
44.  
//아래로 이동
47. 이.moveDown =
함수
48. (){ 이.y =
이
49. .speed; var maxY = canvas.height - this
.radius;
50. if(this.y > maxY){
51. //하한값 초과 방지
이것
52. .y = maxY                                                        
};
53. }
55. //공 그리기
57. 함수
drawBall(ball){
58.  if
(
59. typeof ctx != "정의되지 않음"
){
60. ctx.beginPath() ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2, false)
ctx.fill()
}
62. }
64. //캔버스 지우기
65. 함수clearCanvas(){
66.  if(typeof ctx != "정의되지 않음"){
67. ctx.clearRect(0, 0, 400, 300)
68. }
69. }
71. var ball = new Ball()
72. //html5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 여부를 간단히 감지합니다.
73. if(canvas.getContext){ 
74. //해당 CanvasRenderingContext2D 객체(브러시) 가져오기
75. var ctx = canvas.getContext("2d")
76. drawBall(공)
77. }
79. //onkeydown 이벤트에 대한 콜백 핸들러 함수
80. //사용자의 키에 따라 공의 움직임을 제어합니다.
81. 함수 moveBall(이벤트){
82. 스위치(event.keyCode){
83.  case 37: //왼쪽 화살표 키  
84. ball.moveLeft()
85. 휴식
86.  case 38: //상향 키  
87. ball.moveUp()
88. 휴식
89.  case 39: //오른쪽 화살표 키  
90. ball.moveRight()
91. 휴식
92.  case 40: //아래쪽 화살표 키
93. ball.moveDown()
94. 휴식
95.  default: //다른 키 조작이 응답하지 않습니다
96. 반환
97. }
98.  
99. clearCanvas(); //캔버스를 먼저 지웁니다
100. drawBall(ball) //최신 공 그리기
101. }