Ситуация такая: человек должен выбрать из заданных цветов тот который ему нравится, и круг этого цвета появляется на холсте
Голову ломаю уже не первую неделю, пока у меня только по факту набор пачки кругов с рандомными абсолютно цветами. Размышляю о том, чтобы при клике на понравившийся человеку цвет добавлялся круг, по сути, это же кнопки, но при изучении DOM и прочих я совсем запутался как мне это к существующему коду приложить, куда мне стоит смотреть или как мне оформить все по-человечески?
Существующий код такой:
class GradientAnimation {
constructor() {
this.cnv = document.querySelector(`canvas`);
//без этого в целом не будет рисовать круги
this.ctx = this.cnv.getContext(`2d`);
this.circlesNum = 10; //количество кружков которые можно создать
this.minRadius = 200;
this.maxRadius = 400;
//сбавляем скорость кружков
this.speed = .005;
// это адаптация холста, будет выполнять че в фигурных скобках
(window.onresize = () => {
this.setCanvasSize();
this.createCircles();
})();
//запуск анимации
this.drawAnimation();
}
setCanvasSize() {
this.w = this.cnv.width = innerWidth ;
this.h = this.cnv.height = innerHeight;
}
createCircles() {
//чтоб совсем крыша не поехала надо запихать все в массив
this.circles = [];
for (let i = 0 ; i < this.circlesNum ; ++i) {
this.circles.push(new Circle(this.w, this.h, this.minRadius, this.maxRadius));
}
}
//вот тут то самое рисование кругов вызовом метода
drawCircles() {
this.circles.forEach(circle => circle.draw(this.ctx, this.speed));
}
clearCanvas() {
this.ctx.clearRect(0, 0, this.w, this.h);
}
//вызываем из метода анимации, она рекурсивна
drawAnimation() {
//чистим холст чтоб после кругов ниче не оставалось
this.clearCanvas();
this.drawCircles();
//вот эта штука делает рекурсию да
window.requestAnimationFrame(() => this.drawAnimation());
}
}
//частицы в случайных местах
class Circle {
constructor(w, h, minR, maxR) {
this.x = Math.random() * w;
this.y = Math.random() * h;
//и он крутится вертится
this.angle = Math.random() * Math.PI * 2;
//случайный радиус окружностей
this.radius = Math.random() * (maxR - minR) + minR;
//тут рандомная генерация цветов, надо менять
this.firstColor = `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
this.secondColor = `hsla(${Math.random() * 360}, 100%, 50%, 0)`;
}
//рисовать кружки
draw(ctx, speed) {
this.angle += speed;
const x = this.x + Math.cos(this.angle) * 200;
const y = this.y + Math.sin(this.angle) * 200;
//тут эти вот градиенты
const gradient = ctx.createRadialGradient(x, y, 0, x, y, this.radius);
gradient.addColorStop(0, this.firstColor);
gradient.addColorStop(1, this.secondColor);
ctx.globalCompositeOperation = `overlay`;
//то самое заполнение цветом
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, this.radius, 0, Math.PI * 2);
ctx.fill();
}
}
//скрипт только после полной загрузки страницы
window.onload = () => {
new GradientAnimation();
}
::-webkit-scrollbar {
display: none;
}
body {
margin: 0%;
/* overflow: hidden; */
/* background: rgb(20 , 25, 45); */
}
/* a {
font-family: arial;
border-radius: 3px;
padding: 9px;
background: red;
text-decoration: none;
color: white;
position: fixed;
right: 50%;
transform: translate(50%, 0);
} */
canvas {
display: block;
background:hsl(222, 25%, 20%);
}
/* canvas {
position: absolute;
z-index: -1;
} */
<!DOCTYPE html>
<html lang="ru">
<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>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas></canvas>
<script src="script.js"></script>
</body>
</html>
Дополняю с кнопками, я немного теряюсь в том, как вставлять код на сайте, думал что вставил на деле нет, с кнопками вот (Я понимаю, что мне нужно выуживать цвет с кнопок и отправлять их в круг, по JS получается так что градиент идет через два рандомных цвета, можно было бы туда отправить как-то эти цвета?):
::-webkit-scrollbar {
display: none;
}
body {
margin: 0%;
}
/* Стили кнопки */
.button {
background-color: hsl(120, 55%, 55%); /* зеленый */
border: none;
color: hsl(0, 100%, 100%); /*белый*/
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* скорость */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 { /*зеленый*/
background-color: hsl(0, 100%, 100%); /*белый*/
color: hsl(0, 100%, 0%); /*черный*/
border: 2px solid hsl(120, 55%, 55%);
}
.button1:hover {
background-color: hsl(120, 55%, 55%);
color: hsl(0, 100%, 100%); /*белый*/
}
.button2 { /*синий*/
background-color: hsl(0, 100%, 100%); /*белый*/
color: hsl(0, 100%, 0%); /*черный*/
border: 2px solid hsl(235, 80%, 45%);
}
.button2:hover {
background-color: hsl(235, 80%, 45%);
color: hsl(0, 100%, 100%); /*белый*/
}
.button3 { /*красный*/
background-color: hsl(0, 100%, 100%); /*белый*/
color: hsl(0, 100%, 0%); /*черный*/
border: 2px solid hsl(0, 100%, 50%);
}
.button3:hover {
background-color: hsl(0, 100%, 50%);
color: hsl(0, 100%, 100%); /*белый*/
}
.button4 { /*фиолетовый*/
background-color: hsl(0, 100%, 100%); /*белый*/
color: hsl(0, 100%, 0%); /*черный*/
border: 2px solid hsl(301, 90%, 38%);
}
.button4:hover {
background-color: hsl(301, 90%, 38%);
color: hsl(0, 100%, 100%); /*белый*/
}
.button5 { /*черный*/
background-color: hsl(0, 100%, 100%); /*белый*/
color: hsl(0, 100%, 0%); /*черный*/
border: 2px solid hsl(120, 0%, 30%);
}
.button5:hover {
background-color: hsl(120, 0%, 30%);
color: hsl(0, 100%, 100%); /*белый*/
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styleproj.css">
</head>
<body>
<h1>Не проходите мимо</h2>
<p>Мы проводим исследование, просто нажмите на цвет, который сейчас вызывает у Вас наибольшую симпатию.</p>
<button class="button button1">Зеленый</button>
<button class="button button2">Синий</button>
<button class="button button3">Красный</button>
<button class="button button4">Фиолетовый</button>
<button class="button button5">Черный</button>
<script src="script_vibor.js"></script>
</body>
</html>
Я думаю в целом можно как-то добавлять круги через счетчик, изначально же кругов должно быть 0, при клике на кнопку добавляется круг