이 기사는 순환 진행 막대를 달성하고 디지털 백분율 효과 예제를 표시하기 위해 HTML5 캔버스를 소개합니다.
효과를 달성하십시오
1. 먼저 HTML 코드를 만듭니다
<캔버스 ID = 캔버스 너비 = 500 높이 = 500 스타일 = 배경 :#000;> </canvas>
2. 캔버스 환경을 만듭니다
var canvas = document.getElementById ( 'canvas'), // 캔버스 요소 컨텍스트 가져 오기 = canvas.getContext ( '2d'), // 도면 환경을 가져 오십시오. Point X- 축 좌표 센터 = Canvas.Height/2, // 캔버스 센터 포인트 y 축 좌표 RAD = MATH.PI*2/100, // 360도를 100 부로 나누면 각각 RAD 학위입니다. 속도 = 0.1; / / 빠르고 느리게로드하십시오.
3. 5 픽셀 너비 스포츠 외부 원을 그립니다
// 绘制 함수 bluecircle (n) {context.Strokestyle = #fff; ); 각도, 시계 방향/반 시계 방향) context.Stroke ();4. 흰색 외부 링을 그립니다
// 흰색 외부 기능 whitecircle () {context.beginpath (); , false) conte.stroke ();5. 텍스트 도면 퍼센트
함수 텍스트 (n) {context.save (); 저장 및 복원; // 글꼴 크기와 글꼴을 그리며 지정된 위치 컨텍스트를 그립니다 drawings.restore ();}6. 운동하자
// 애니메이션 사이클 (함수 drawframe () {window.requestanimationframe (drawestanimationframe); context.clearRect (0, 0, canvas.width, canvas.height); Whitecircle (); te xt (speed); bluecircle (speed); if (if (Speed> 100) 속도 = 0; 속도+= 0.1;} ());완전한 코드
<! <html lang = en> <head> <메타 charset = utf-8> <title> html5 라운드 제안 스트립 및 디스플레이 디지털 백분율 </title>*{margin : 0;} body; {Text-Align : 중심; #000;} </style> </head> <body> <Canvas 너비 = 500 높이 = 500 스타일 = 배경 : #000;> </canvas> < script> winde 2d centerx = canvas.width/2, // canvas center point x- 축 cendry = canvas.height/2, // canvas center point y -axis rad = math.pi*2/100, // 360도 분할 부분에 대해, 각 부분은 RAD 속도 = 0.1입니다. strokestyle = #fff; 2, -math.pi/ 2 +n*rad, false); // arc context.arc (x 좌표, y 좌표, 반경, 시작 각도, 시계 방향/ 카운터 시계 방향) context.stroke (); // context.closepath (); // 흰색 외부 원형 whitecircle () {context.save (context.beginpath); linewidth = 2; .rest.restore () 텍스트 텍스트 (n) {context.save (); 드로잉 스타일 .font = 40px. 10); ());} </script> </body> </html>위는이 기사의 모든 내용입니다.