순환 진행률 표시줄 애니메이션을 구현하기 위한 캔버스의 샘플 코드

이 문서에서는 캔버스에 순환 진행률 표시줄 애니메이션을 구현하는 방법을 소개하고 자세한 내용을 모든 사람과 공유합니다.

먼저 렌더링을 보여주고 코드를 추가하겠습니다.

진행률 표시줄 애니메이션

캔버스의 너비와 높이는 캔버스 고유의 속성이므로 인터라인 스타일에서 설정해야 합니다. 스타일에서 너비와 높이를 설정하면 그리는 그림이 변형됩니다.

 <canvas id=mycanvas width=100 height=100>70%</canvas>

주요 아이디어: 렌더링은 3개의 원으로 구성됩니다. 가장 바깥쪽 레이어는 진행률 표시줄의 진행률을 변경하는 원과 실제 백분율이 있는 원 내부에 검은색 가장자리가 있는 큰 원으로 구성됩니다.

참고: 원을 그릴 때마다 각 레이어의 스타일을 서로 영향을 주지 않고 독립적으로 설정할 수 있도록 새 레이어를 만들어야 합니다. 전체 디자인 초안은 여러 레이어로 구성됩니다.

 var canvas = document.getElementById(mycanvas);var context = canvas.getContext(2d);function draw(i){// 대형 원형 프레임 context.beginPath();context.lineWidth = 1;context.arc(50,50 , 46,0,Math.PI*2);context.StrokeStyle = 회색;context.Stroke();// 대원 context.beginPath();var grd = context.createLinearGradient(15,15,80,80);grd.addColorStop(0,red);grd.addColorStop(0.5,yellow);grd.addColorStop(1,blue);context.arc(50,50,38, 0,Math.PI*2*(i/100));context.lineWidth = 16;context.StrokeStyle = grd;context.Stroke();// context.fillStyle = grd;// context.fill();// 작은 원 context.beginPath();context.arc(50,50,30, 0,Math.PI*2);context.lineWidth = 1;context.StrokeStyle = 회색;context.Stroke();context.fillStyle = white;context.fill();//Context.beginPath();context.textBaseline = middle;context.textAlign = center;context.font = 20px Arial;context.fillStyle = black;context.fillText(i+%,50 , 50);}

캔버스를 지우려면 context.clearRect() 메서드를 사용하세요.

 var i = 0;var 진행 = parsInt(canvas.innerHTML);// console.log(progress);var 타이머 = setInterval(function(){if(i >= 진행){clearInterval(timer);}context.clearRect (0,0,canvas.width,canvas.height);draw(i);i++;},50);

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.