HTML5는 애니메이션 형태로 이미지를 로드합니다. _html5 튜토리얼 기술

예제에서는 HTML5 캔버스 태그와 자바스크립트 스크립트를 사용하여 로딩 이미지 효과를 간단히 작성했습니다. 효과를 미리 보려면 HTML5를 지원하는 브라우저를 사용하세요.
아래 그림은 점진적인 수평 그리드 효과를 보여줍니다

html 부분:

XML/HTML 코드클립보드에 콘텐츠 복사

1. /span>> 
2. html lang="ko" > 
3. 머리> 
4. 메타 문자 집합="UTF- 8"> 
5. 제목>html5 이미지 로딩 제목> 
6. 머리> 
7. 몸> 
8. 버튼 클릭="drawImg1( )">왼쪽에서 오른쪽으로버튼>
9. 버튼 클릭="drawImg2( )">중앙에서 좌우측으로버튼>
10. 버튼 클릭="drawImg3( " > 시간/> 
11. 캔버스 클래스
=
12. "캔버스" id="캔버스" 너비="600" 높이="300">캔버스>  몸> 
13. html> 
14. JavaScript 부분: XML/HTML 코드
클립보드에 콘텐츠 복사

1. //초기화
2. var 캔버스 = 문서.getElementById("캔버스"),
3. 컨텍스트 = 캔버스.getContext("2d"),
4. 이미지 = 새 이미지()
5. image.src = "img/test.jpg"
6. //왼쪽에서 오른쪽으로 로딩 방법
7. drawImg1() 함수{
8. var drawWidth = 0,
9. 간격 = setInterval(function(){
10. context.drawImage(image, 0, 0, drawWidth, image.height, 0, 0, drawWidth, image.height)
11. drawWidth = 20
12. if(drawWidth > canvas.width)clearInterval(간격);
},100)
}
//중앙에서 좌우측으로 로딩방식 오픈
drawImg2() 함수{
var
17. drawWidth = 0,
18. drawLeft = 캔버스.width/2,
19. 간격 = setInterval(function(){
context.drawImage(image, drawLeft, 0, drawWidth, image.height, drawLeft, 0, drawWidth, image.height)
drawWidth = 20
drawLeft
22. -= 10; if(drawLeft
0)clearInterval(간격); },100) }
//점진적 수평 그리드 로딩 방식
drawImg3() 함수{
var
26. drawWidth
=
27. 0, spaceWidth
=
28. canvas.width/20, //10은 분할된 블록의 개수를 의미합니다 간격
=
29. setInterval(function(){ for(var i
=
30. 0;i20;i ){ context.drawImage(image, i*spaceWidth, 0, drawWidth, image.height, i*spaceWidth, 0, drawWidth, image.height)
}
drawWidth = 5
if(drawWidth
33. >
spaceWidth)clearInterval(간격);
34. },100);
35. }

위 내용은 HTML5에서 애니메이션 형태로 이미지를 로딩하기 위해 편집자가 소개한 내용입니다.