окончательные рендеры1. Определите переменные
Определите радиус, определите толщину кольца, определите положение центра круга и определите цвет заливки по умолчанию.
пусть радиус = 75let толщина = 10let внутреннийРадиус = радиус - толщинаlet x = 75let y = 75var Canvas = document.getElementById('tutorial');var ctx = Canvas.getContext('2d');ctx.fillStyle = #f2d7d7; 2. Нарисуйте первую дугу ctx.beginPath();ctx.arc(x, y, радиус, Math.PI * 1,5, Math.PI)
Обратите внимание на метод BeginPath() — первый шаг в создании пути. По сути, путь состоит из множества подпутей, которые представлены в списке, и все подпути (линии, дуги и т. д.) образуют фигуру. Каждый раз, когда вызывается этот метод, список очищается и сбрасывается, после чего мы можем перерисовать новый график.
Другими словами, этот метод можно использовать для группировки изображений Canvas и рисования новой графики. Если этот метод не вызывается, новая графика будет подключена к предыдущей графике.
3. Нарисуйте первое соединениеctx.quadraticCurveTo((x — внутренний радиус) — толщина / 2, y — толщина, x — внутренний радиус, y)
Соединение рисуется с помощью квадратичной кривой Безье. Метод SquareticCurveTo(cp1x, cp1y, x, y) Canvas принимает 4 параметра. Первый и второй параметры — это контрольные точки, а третий и четвертый параметры — концы. официальный документ
Просто определите контрольные и конечные точки, чтобы нарисовать дугу.
4. Нарисуйте вторую дугуctx.arc(x, y, внутреннийРадиус, Math.PI, Math.PI * 1,5, правда)
Обратите внимание, что последний параметр после метода имеет значение true, что означает рисование против часовой стрелки (по умолчанию — по часовой стрелке).
5. Нарисуйте второе соединениеctx.quadraticCurveTo(y — толщина, (x — внутренний радиус) — толщина / 2, x, y — внутренний радиус — толщина)
На самом деле этот шаг мало чем отличается от третьего. Мы просто изменили позиции параметров.
6. Наполнениеctx.fill();
На этом этапе простое незамкнутое кольцо завершено.
Нарисуйте второе кольцо индикатора выполнения.
7. Инициализацияctx.beginPath();ctx.fillStyle = #e87c7c;
BeginPath означает рисование нового изображения. Если этот метод не вызывается, изображение, нарисованное позже, будет связано с изображением, нарисованным ранее.
8. Нарисуйте второе кольцо индикатора выполнения.ctx.beginPath();ctx.fillStyle = #e87c7c;ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2)ctx.quadraticCurveTo((x + InternalRadius) + толщина / 2, y + толщина, x + внутренний радиус, y)ctx.arc(x, y, внутренний радиус, Math.PI * 2, Math.PI * 1.5, true)ctx.quadraticCurveTo(y — толщина, (x — внутренний радиус) — толщина / 2, x, y — внутренний радиус — толщина)ctx.fill();
Поскольку способ рисования первого круга точно такой же, повторяться он не будет. Разница лишь в дуге круга.
9. Поворот холстапреобразование: поворот (-135 градусов);
Поскольку вращение CSS более удобно и экономит расчет углов, я использую преобразование CSS для поворота. Конечно, Canvas также предоставляет метод вращения.
Полный код
<!DOCTYPE html><html lang=cn><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, Initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>canvas</title> <style> .ring { ширина: 150 пикселей; высота: 150 пикселей; flex-items: center; flex-direction: columns; } #tutorial {transform: Rotate (-135deg); абсолютный; размер шрифта: 30 пикселей; вес шрифта: жирный; цвет: красный } .small {размер шрифта: 12 пикселей; шрифт-вес: светлее; } .title { цвет: красный; позиция: абсолютная } </style></head><body> <div class=ring> <canvas id=tutorial width=150 height= 150></canvas> <span class=fraction>100 <span class=small>Точки</span> </span> <span class=title>Точки обслуживания</span> </div> <script> let radius = 75 пусть толщина = 10 пусть внутреннийРадиус = радиус - толщина пусть x = 75 пусть y = 75 var Canvas = document.getElementById('tutorial'); var ctx = Canvas.getContext('ctx.fillStyle = #f2d7d7; ctx.beginPath(); ctx.arc(x, y, радиус, Math.PI * 1.5, Math.PI) ctx.quadraticCurveTo((x — внутренний радиус) — толщина/2, y — толщина, x — внутренний радиус, y) ctx.arc(x, y, InnerRadius, Math.PI, Math.PI * 1,5, true) ctx.quadraticCurveTo(y — толщина, (x — внутренний радиус) — толщина / 2, x, y — внутренний радиус — толщина) ctx.fill(); ctx.beginPath(); ctx.fillStyle = #e87c7c; ctx.arc(x, y, radius, Math.PI * 1.5, Math.PI * 2) ctx.quadraticCurveTo((x +) внутреннийРадиус) + толщина / 2, y + толщина, x + внутреннийРадиус, у) ctx.arc(x, y, InnerRadius, Math.PI * 2, Math.PI * 1.5, true) ctx.quadraticCurveTo(y - толщина, (x - внутреннийРадиус) - толщина / 2, x, y - внутреннийРадиус - толщина) ctx.fill(); </script></body></html>Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.