HTML5 Canvas реализует панель Ground Progress и отображает пример эффекта цифрового процента

Эта статья представляет HTML5 Canvas для достижения круговой панели прогресса и отображения примера цифрового процента.

Достичь эффекта

1. Сначала создать код HTML

 <canvas id = ширина холста = 500 высот = 500 стиль = фон:#000;> </canvas>

2. Создать среду холста

 var canvas = document.getelementbyid ('canvas'), // get canvas element context = canvas.getContext ('2d'), // Получить среду рисования, укажите как 2d centerx = canvas.width/2, // canva center Координатный центр точки x = Canvas.height/2, // Canvas Center Point Координаты y -оси координаты Rad = Math.pi*2/100, // Разделите 360 градусов на 100 копий, тогда каждый из них является градусом RAD Скорость = 0,1; / / загрузить быстрый и медленный, просто полагайтесь на нее

3. Нарисуйте 5 пикселей шириной спортивных кругов

 // 绘制 5 像素宽的运动外圈 Функция BlueCircle (n) {context.save (); ); // Путь запускает контекст. Угол, по часовой стрелке/против часовой стрелки) контекст.stroke ();

4. Нарисуйте белое внешнее кольцо

 // Функция белого внешнего круга WhiteCircle () {context.save (); , false);

5. Процентный текстовый рисунок

 Функция текста (n) {context.save (); // Установите размер шрифта и шрифт // Нарисуйте шрифт и контекст указанного положения рисунки.restore ();}

6. Пусть это упражнение

 // Цикл анимации (функция drawFrame () {window.requestanimationFrame (drawFrame); контекст. If (if (speed> 100) speed = 0; speed+= 0,1;} ());

Полный код

 <! {Text-Align: Center; Script> window.onload = function () {var canvas = document.getElementByid ('canvas'), // get canvas element context = canvas.getContext ('2d'), / / ​​/ получить среду изображения, укажите на 2d centerx = canvas.width/2, // Canvas Center Point x -Axis Cendry = Canvas.height/2, // Canvas Center Point y -Axis Rad = Math.pi*2/100, // Разделение 360 градусов В 100 для участков каждая порция -это скорость RAD -градуса = 0,1; ; .pi/2, -math.pi/2 +n*rad, false); (); ; context.linewidth = 2; ); / Установите стиль рисования стиля рисования .font = 40px. Центр+10); 0.1;} ());} </script> </body> </html>

Выше всего содержимое этой статьи.