Как написать текст по окружности и определить количество точек?

Добрый день! Давайте разберем код, который вы привели, и рассмотрим, как отрисовать текст по окружности, а также определить количество точек, на которых будет размещен текст.

### Код для отрисовки текста по окружности

Ваш код уже содержит большую часть логики для отрисовки текста по окружности на HTML canvas. Давайте выделим ключевые моменты и добавим некоторые улучшения и пояснения.

1. **Перевод системы координат**: `canv.ctx.translate(centerX, centerY);` - это перенос центра координат в центр окружности, где будет размещен текст.

2. **Расчет углов и координат для символов**: Вы уже правильно разбиваете текст на символы и рассчитываете углы и позиции для каждого символа.

3. **Сохранение координат символов**: Вы сохраняете координаты каждого символа в массив `drawnPoints`, чтобы позже (по окончании отрисовки текста) можно было отобразить точки с помощью `arc`.

4. **Отображение точек**: 
    ```javascript
    for (let i = 0; i < drawnPoints.length; i++) {
        canv.ctx.fillStyle = "yellow";
        canv.ctx.beginPath();
        canv.ctx.arc(drawnPoints[i].x, drawnPoints[i].y, 5, 0, 2 * Math.PI);
        canv.ctx.fill();
    }
    ```

### Определение количества точек

Количество точек можно легко определить, просто посчитав количество символов в вашем тексте. Поскольку вы сохраняете координаты всех символов в массив `drawnPoints`, длина этого массива как раз будет равна количеству символов, размещенных на окружности.

Вы можете сделать это, добавив одну строку после заполнения массива `drawnPoints`:

```javascript
console.log('Количество точек:', drawnPoints.length);
```

### Полный пример кода

Вот полный пример с учетом вышеописанных моментов:

```javascript
function drawTextOnCircle(canv, text, centerX, centerY, diameter, clockwise = 1) {
    canv.ctx.save();
    canv.ctx.translate(centerX, centerY);

    let startAngle = 0;
    let drawnPoints = [];

    // Расчет углов и позиций текста
    for (let j = 0; j < text.length; j++) {
        let charWid = canv.ctx.measureText(text[j]).width; // ширина символа
        let textHeight = 20; // фиксированная высота текста (можно изменить)

        let angle = (charWid / 2) / (diameter / 2 - textHeight / 2) * clockwise;

        let x = Math.cos(startAngle + angle) * (diameter / 2 - textHeight / 2);
        let y = -Math.sin(startAngle + angle) * (diameter / 2 - textHeight / 2);

        drawnPoints.push({ x, y, symbol: text[j] });

        canv.ctx.fillText(text[j], x, y);
        startAngle += angle * 2; // обновляем текущий угол
    }

    canv.ctx.restore();

    // Отображение точек
    for (let i = 0; i < drawnPoints.length; i++) {
        canv.ctx.fillStyle = "yellow";
        canv.ctx.beginPath();
        canv.ctx.arc(drawnPoints[i].x, drawnPoints[i].y, 5, 0, 2 * Math.PI);
        canv.ctx.fill();
    }

    console.log('Количество точек:', drawnPoints.length);
}
```

Теперь вы можете легко вызывать эту функцию, передавая необходимые параметры, и она будет делать все: отрисовывать текст по окружности и показывать количество точек на окружности, поступившее из текста.

Ivan Bogachev Добрый день! 
 Я решил начать с текстового эффекта попроще ( Как сделать эффект текста на кривой безье? ) - написать текст по окружности, но столкнулся в с проблемой с расчетом точек, в которых написаны буквы. 
 Цель расчета этих точек - рассчитать rectangle ограничивающий написанный по окружности текст. 
 Буду благодарен, если посмотрите.