В этой статье представлена реализация круговой анимации индикатора выполнения на холсте, а подробности описаны ниже:
Позвольте мне сначала показать вам визуализацию, а затем добавить код.
анимация индикатора выполнения
1. HTML-часть холста очень проста: всего лишь тег холста.Ширина и высота холста являются его собственными свойствами и должны быть заданы в стиле интерлайн. Если вы зададите ширину и высоту в стиле, нарисованное изображение будет деформировано.
<canvas id=mycanvas width=100 height=100>70%</canvas>2.JS-код Canvas
Основная идея: рендеринг состоит из трех кругов. Самый внешний слой — это большой круг с черными краями, внутри которого находится круг, который меняет ход индикатора выполнения, и круг с реалистичным процентом.
Примечание. Каждый раз при рисовании круга необходимо создавать новый слой, чтобы стиль каждого слоя можно было установить независимо, не влияя друг на друга. Как и слои в PS, полный проект проекта состоит из множества слоев.
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 = Gray;context.stroke();// Большой круг context.beginPath();var grd = context.createLinearGradient(15,15,80,80);grd.addColorStop(0,красный);grd.addColorStop(0,5,желтый);grd.addColorStop(1,синий);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 = белый;context.fill();//Context.beginPath();context.textBaseline = middle;context.textAlign = center;context.font = 20px Arial;context.fillStyle = black;context.fillText(i+%,50 , 50);} 3. Используйте таймер, чтобы обновить холст, чтобы добиться эффекта индикатора выполнения.Используйте метод context.clearRect(), чтобы очистить холст.
var i = 0;var Progress = parseInt(canvas.innerHTML);// console.log(progress);var timer = setInterval(function(){if(i >= Progress){clearInterval(timer);}context.clearRect (0,0,canvas.width,canvas.height);draw(i);i++;},50);Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.