В этой статье представлен пример кода компонента обратного отсчета Canvas Ring, и мы делимся им со всеми подробностями:
Эффект такой, как показано на рисунке 1:
Компонент обратного отсчета кольца холстаОбратный отсчет кольца Canvas — это обратный отсчет, реализованный на основе Canvas и рекомендуемый для использования на мобильных устройствах.
Адрес загрузки обратного отсчета холстового кольца
1. Как использовать1. HTML-код
Атрибут ID может быть назван произвольно.
<canvas id=canvas></canvas>
2. Введите файлprocess.js.
Ссылка на страницу
<script src=js/process.js></script>
3. Параметры инициализации
Просто создайте экземпляр
<script> window.onload = function () { let ctd = new Countdown(); ctd.init() };</script> 2. Описание параметров настройкиСледующие параметры не являются обязательными и могут быть настроены в соответствии с конкретными потребностями.
window.onload = function () { let ctd = new Countdown(); ctd.init({ id: Canvas, // ID, холст должен иметь размер атрибута ID: 130, // Максимальный размер для рисования круга, ширина = High borderWidth: 4, // Ширина границы borderColor: #fff, // Цвет границы externalColor: #fff, // Цвет крайнего нижнего круга ScheduleColor: #fff, // Цвет анимации индикатора выполнения FontColor: #fff, // Цвет шрифта RingColor: #ffc720, // Цвет кольца индикатора выполнения InternalColor: #4e84e5, // Цвет фона внутреннего круга FontSize: 50, Time: 5 }); 3. Пример кодаHTML
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Title</title> <style> body {background: #c2c1ce; } .container {position: left: 50%; верх: 50%; преобразование: перевод (-50%, -50%); ширина: 130 пикселей; высота: 130 пикселей; центр } </style></head><body><div class=container> <canvas class=canvas id=canvas></canvas></div><script src=js/process.js></script; ><script> window.onload = function () { let ctd = new Countdown(); ctd.init() };</script></body></html>js
/** * Создано Тан Си 15 марта 2018 г. */function Countdown() { // Устанавливаем параметры по умолчанию this.settings = { id: Canvas, // ID, холст должен иметь размер атрибута ID: 130, // Максимальный размер для рисования круга, ширина = высота borderWidth: 4, // Ширина границы borderColor: #fff, // Цвет границы externalColor: #fff, // Цвет самого внешнего нижнего круга ScheduleColor: #fff, // цвет анимации индикатора выполнения FontColor: #fff, // Цвет шрифта RingColor: #ffc720, // Цвет кольца индикатора выполнения InternalColor: #4e84e5, // Цвет фона самого внутреннего круга FontSize : 50, время: 5 }}Countdown.prototype.init = функция (opt) { this.obj = document.getElementById(this.settings.id); this.obj.width = this.settings.size; this.obj.height = this.settings.size; this.ctx = this.obj.getContext(2d); this.settings, opt); this.countdown();};//Рисуем цвет фона Countdown.prototype.drawBackground = function () { this.drawCircle(0, 360, 0, this.settings.outerColor);};// Рисуем фон анимации индикатора выполнения Countdown.prototype.drawProcess = function () { this.drawCircle(0, 360, 4, this.settings.ringColor);};/ / Отсчет обратного отсчета Countdown.prototype.drawInner = function () { this.drawCircle(0, 360, 23, this.settings.innerColor); this.strokeBorder(this.settings.borderWidth);};// Рисуем анимацию индикатора выполнения Countdown.prototype.drawAnimate = function () { // Угол поворота let deg = Math.PI / 180; v = расписание * 360, startAng = -90, endAng = -90 + v; this.ctx.beginPath(); this.ctx.moveTo(this.settings.size/2, this.settings.size/2); this.ctx.arc(this.settings.size/2, this.settings.size/2, this.settings.size); / 2 -3, startAng * deg, endAng * deg, false); this.ctx.fillStyle = this.settings.scheduleColor this.ctx.fill(); this.ctx.closePath();};// Рисуем границу Countdown.prototype.strokeBorder = function (borderWidth) { this.ctx.lineWidth = borderWidth; this.ctx.strokeStyle = this.settings.borderColor; инсульт ();};// Рисуем текст Countdown.prototype.strokeText = function (text) { this.ctx.textAlign = center; this.ctx.textBaseline = middle; this.ctx.font = this.settings.fontSize+px+ microsoft yahei; this.ctx.fillStyle = this.settings.fontColor; this.ctx.fillText(text, this.settings.size / 2, this.settings.size / 2);};// Рисуем круг Countdown.prototype.drawCircle = function (startAng, endAng, граница, fillColor) { let deg = Math.PI/180; this.ctx.beginPath(); this.ctx.arc(this.settings.size/2, this.settings.size/2, this.settings.size/; 2 -border, startAng * deg, endAng * deg, false); this.ctx.fillStyle = fillColor; this.ctx.closePath();}; //Анимация индикатора выполнения Countdown.prototype.countdown = function () { let oldTime = +new Date(); timer = setInterval(() => { let allMs = this.settings. time * 1000, // Например, 30*1000=30 000 мс currentTime = +new Date(); Размер шага = (текущее время - прошедшее время) / общее количество секунд Schedule = (currentTime - oldTime) / allMs; this.schedule = Schedule; this.drawAll(schedule); if (currentTime - oldTime >= allMs) { / / Перерисовать this.drawBackground(); this.drawProcess(); this.drawAnimate(); this.strokeText(0); clearInterval(timer); } }, 100);};// Draw all Countdown.prototype.drawAll = function (schedule) { Schedule = Schedule >= 1 : Schedule; let text = parseInt(this.settings.time *) (1 - расписание)) + 1 // Очищаем холст this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawBackground(); this.drawProcess(); this.drawInner(); this.strokeText(text);};//Функция копирования объекта Extend(obj1,obj2){ for(let attr in объект2) { объект1[атрибут] = объект2[атр] }}; 4. Работа по подготовке дополнительных холстов.На самом деле, холст не так уж и загадочен. Это не что иное, как тег H5, как и другие теги HTML:
<canvas id=canvas></canvas>
Обратите внимание, что лучше всего установить ширину и высоту холста в начале (если вы не установите ширину и высоту, браузер по умолчанию установит размер холста на 300 пикселей в ширину и 100 пикселей в высоту), и он не может задается с помощью css (будет подтянуто расширение), рекомендуется писать прямо внутри тега Canvas:
<canvas id=ширина холста=130 высота=130></canvas>
Сам Canvas не имеет никаких возможностей рисования, и вся работа по рисованию реализуется через js. Обычно мы используем getElementById в js, чтобы получить холст для работы (это означает, что нам нужно установить идентификатор для холста):
var c = document.getElementById(canvas);var ctx = c.getContext(2d);
1. Подготовив кисть, вы можете начать рисовать. Кольца на самом деле представляют собой концентрические круги с разными радиусами. Координаты центра: (размер/2, размер/2). Сначала нарисуйте самый большой нижний круг на белом фоне с радиусом размера/2. .
let deg = Math.PI / 180; // BeginPath() может изолировать эффект рисования пути и предотвратить загрязнение предыдущих эффектов. ctx.beginPath();// tcx.arc(центр круга, градус, 360 * градус, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
2. Начните рисовать второй желтый нижний круг, центр круга также (размер/2, размер/2), но радиус на 4 пикселя меньше, чем белый нижний круг, поэтому радиус желтого нижнего круга равен (размер /2-4)
let deg = Math.PI / 180; // BeginPath() может изолировать эффект рисования пути и предотвратить загрязнение предыдущих эффектов. ctx.beginPath();//tcx.arc(центр круга 0* град, 360 * град, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
3. Начните рисовать синий внутренний круг с центром круга (размер/2,размер/2) и радиусом (размер-23), а затем добавьте к нему белую рамку толщиной 4 пикселя.
let deg = Math.PI / 180; // BeginPath() может изолировать эффект рисования пути и предотвратить загрязнение предыдущих эффектов. ctx.beginPath();// tcx.arc(центр круга 0* град, 360 * град, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();// Белая рамка ctx.lineWidth = 4;ctx.strokeStyle = #fff;ctx.stroke();
4. Нарисуйте текст и отцентрируйте его по вертикали.
ctx.textAlign = center;ctx.textBaseline = middle;ctx.fillStyle = #fff;// ctx.fillText (текст, координата X относительно холста, координата Y относительно холста) ctx.fillText(30, size / 2 , размер / 2);
5. Как создать анимацию? Фактически, это также процесс рисования белого круга, процесс медленного закрытия желтого индикатора выполнения. Затем сначала нарисуйте белый круг. В это время синий круг будет покрыт белым анимированным кругом. , последний синий круг будет нарисован нормально.
let deg = Math.PI / 180;ctx.beginPath();// tcx.arc(центр окружности X, центр окружности Y, радиус, начальный угол, конечный угол, по часовой стрелке и против часовой стрелки);ctx.arc(size / 2, размер/2, размер/2-4, 0*град, 360*град, false);ctx.fillStyle = #fff;ctx.fill();ctx.closePath();
6. Относительно простой процесс рисования завершен. Далее нам нужно связать анимацию с числами. Используя текущее самое позднее время – самое раннее время, а затем разделив общее время, мы можем получить ключевой процент. изменение чисел и угла рисования белого анимированного круга.
Countdown.prototype.countdown = function () { let oldTime = +new Date(); // Прошедшее время: 1522136419291 timer = setInterval(() => { let currentTime = +new Date(); // Текущее время: 1522136419393 let allMs = this.settings.time * 1000;// Общее время в секундах: например, 30*1000=30 000 мс Schedule = (currentTime - oldTime) / allMs;// Процент отрисовки: (1522136419393-1522136419291)/30000=0,0204 this.schedule = Schedule; this.drawAll(schedule); if (currentTime - oldTime >= allMs) { // Redraw this.drawBackground(); this.drawAnimate(); this.strokeText(0);clearInterval(timer); // Нарисовать весь обратный отсчет; .prototype.drawAll = функция (расписание) { расписание = расписание >= 1 ? 1: расписание; let text = parseInt(this.settings.time * (1) - расписание)) + 1; // Очищаем холст this.ctx.clearRect(0, 0, this.settings.size, this.settings.size); this.drawProcess(); ( ); this.drawInner(); this.strokeText(text);};// Рисуем анимацию индикатора выполнения Countdown.prototype.drawAnimate = function () { // Угол поворота let deg = Math.PI / 180; let v = Schedule * 360, startAng = -90, //Начальный угол endAng = -90 + v; //Конечный угол this.ctx.beginPath(); this.ctx.moveTo(this.settings) .size/2, this.settings.size/2); this.ctx.arc(this.settings.size/2, this.settings.size/2, this.settings.size / 2 - 3, startAng * deg, endAng * deg, false); this.ctx.fillStyle = this.settings.scheduleColor; this.ctx.fill(); this.ctx.closePath();} ;Процессно-ориентированная версия
/** * Анимация индикатора выполнения*/ обратный отсчет: function () { this.getSystemInfo().then(v => { // Адаптивная let width = v.windowWidth, size = width >= 414 ? 66 : 400 / 414 * 66; размер = parseInt (размер); размер = размер % 2 ? размер + 1: размер; пусть maxtime = 30, sTime = + новая дата, температура = setInterval(() => { let time = maxtime * 1000, currentTime = +new Date, Schedule = (currentTime - sTime) / time; this.drew(schedule, maxtime, size); if (currentTime - sTime >= time ) { // Рисуем текст this.setData({ Schedule: 0 });clearInterval(temp }; 100 }, /** *); draw*/draw: function (schedule, val, size) { size = size || 66; const _ts = this; = размер/2, град = Math.PI/180; _ts.setData({ширина: размер, высота: размер, расписание: текст + 1 }); Очистить холст ctx.clearRect(0, 0, size, size); // Рисуем белый фон ctx.beginPath(); ctx.arc(r, r, r, 0 * deg, 360 * deg); = 'rgba(255,255,255,1)'; ctx.closePath(); ctx.fill(); Нарисуйте оранжевый ctx.beginPath(); ctx.arc(r, r, r - 2, 0 * deg, 360 * deg); ctx.fillStyle = 'rgba(248,200,80,1)'; ctx.fill(); // Рисуем белый индикатор выполнения let v = Schedule * 360; ctx.moveTo(r, r, r, r, r, r, -90 * градус, (-90 + v) * град); ctx.fillStyle = 'rgba(255,255,255,1)'; (); ctx.fill(); // Центральный синий низ ctx.beginPath(); ctx.arc(r, r, r - 12, 0 * град, 360 * град); ctx.fillStyle = 'rgba(90,140,220,1)'; ctx.closePath(); ctx.fill(); // Рисуем текст ctx.strokeText(); Унифицированный рисунок ctx.draw() },Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.