먼저 아래 그림과 같이 둥근 모양의 진행 상황과 같이 그리기의 효과를 살펴보십시오.
나는 HTML5의 캔버스를 사용하여 그러한 순환 진전을 이루고 있습니다.
첫 번째는 HTML 페이지이고 HTML5의 문서 로고는 다음과 같습니다.
<doctype html>
이 문서 로고는 HTML4보다 훨씬 간단합니다.
두 번째 단계는 페이지에 캔버스 캔버스 요소를 만드는 것입니다.
<canvas class = 프로세스 너비 = 48px 높이 = 48px> 61%</canvas>
나는 길이와 너비가 48 픽셀을 가진 캔버스를 만들었습니다. 왜냐하면 내가 그리는 직경은 48 픽셀이기 때문에 캔버스 요소의 61%는 링의 중간에 표시되지 않습니다. 이 61%는 이전 브라우저가 캔버스 요소를 지원하지 않을 때 표시되는 텍스트입니다.
글쎄, HTML 페이지의 내용은 기본적으로 지금까지 완료되었으며 JavaScript를 사용하여 링을 묘사합니다.
function drawRocess () {// 페이지의 모든 클래스의 모든 클래스 요소를 선택한 다음 각 요소 도면을 반복합니다 (여기서는 jQuery의 선택으로 선택됩니다) $ ( 'canvas.process') 캔버스 태그는 먼저 61%입니다 (여기서 문자열 트림 메소드는 내 방법입니다. 전후에 갈 수있는 방법에는 여러 가지가 있습니다. 길이-); 캔버스 태그 var 컨텍스트는 현재 2d var 컨텍스트를 지원합니다 이 캔버스에 그림을 그리십시오. 캔버스에 아무것도 필요하지 않습니다. MOVETO (24, 24); // 원형 심장은 각도에서 24,24, 각도에서 2pi의 끝이 끝납니다 시계 방향 또는 시계 방향으로. ARC (24, 24, 24, 0, false.closepath); // *** 회색 둥근 그림 완성 // Progress Context.beginPath ();이 단계는 팬을 그리면 매우 중요합니다. 팬 모양의 컨텍스트가 아닙니다 .Moveto (24, 24); // 위의 원 사이의 유일한 차이점은 서클로 가득 차 있지 않으며, 팬 모양의 컨텍스트를 그립니다. pi * 2 * context.fillStyle = '#e74c3c'; 24, 24, 24, 21, 0, true. // 컨텍스트를 그립니다 , 채우기는 드로잉 라인 컨텍스트입니다. context.textalign = er ';글쎄, 그림 후. 드로우 프로세스 방법의 효과를 보는 것을 잊지 마십시오.
크기 : 2.4 kb 이미지 첨부 파일보기
읽어 주셔서 감사합니다. 모두를 돕고 싶습니다.이 사이트에 대한 귀하의 지원에 감사드립니다!