@Locko
студент

Как выстроить елементы в канвасе по кругу?

Только начинаю разбираться в canvas , ну и пытаюсь достичь такого эффекта:
5dc2e6b8012e7543833995.png
Для этого - в канвас отрисовываю 6 раз одну и ту же картинку по координатам соответствующим траектории круга.
На данный момент не пойму как повернуть каждый отрисованый элемент на какое-то количество градусов.
CodePen
let canvas          = document.querySelector('canvas'), //берем канвас
            ctx             = canvas.getContext('2d'), // указываем контекст
            img             = new Image(), // создаем картинку-елемент, которая потом будет отрисована в канвас
            baseX           = (window.innerWidth/100)*50, // центр канваса по высоте
            baseY           = (window.innerHeight/100)*50, // центр канваса по ширине
            r               = baseX/4; //радиус круга по которому будут выстроины елементы
            
            canvas.height=window.innerHeight;  //Ростягиваем канвас на весь экран
            canvas.width=window.innerWidth;

            ctx.beginPath();     //Отрисовываем вспомогательный круг ,что бы было видно размеры и траэкторию
            ctx.arc(baseX, baseY, r, 0, 2 * Math.PI); //Где центр круга находиться по центру канваса , радиус равный r
            ctx.stroke(); //Зарисовываем круг

            img.onload=function(){  //когда картинка загрузиться
                let angle=0; //начальное значение угла наклона елементов

                for(let i=0; i<6; i++){  // рисуем 6 раз елемент из картинки
                    let ctx = canvas.getContext('2d');
                    let elem = ctx.drawImage(img, getPos(angle).x , +getPos(angle).y); //тут getPos() дает координаты по траэктории круга
                    
                    angle-=60; //угол уменьшается на 60 градусов для каждого елемента (360/6=60)
                }
                
            }
            
            img.src="https://dev.thesociety.site/wefwfwefwewfdss/vr.svg";  //картинка источник

            function getPos(angle){
                let vx=baseX+Math.sin(-angle*Math.PI/180)*r;
                let vy=baseY+Math.cos(-angle*Math.PI/180)*r;
        
                console.log(vx.toFixed(2),vy.toFixed(2));
                return {
                    x: (vx).toFixed(2),
                    y: (vy).toFixed(2)
                };
            }

Пробывал .rotate( ) ,но не получилось повертать елементы - только весь канвас
  • Вопрос задан
  • 49 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы