2

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

Голову ломаю уже не первую неделю, пока у меня только по факту набор пачки кругов с рандомными абсолютно цветами. Размышляю о том, чтобы при клике на понравившийся человеку цвет добавлялся круг, по сути, это же кнопки, но при изучении 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, при клике на кнопку добавляется круг

9
  • Пожалуйста, исправьте вопрос, чтобы он отражал конкретную проблему с достаточным количеством деталей для возможности дать адекватный ответ. Commented 2 апр. 2022 в 14:09
  • заданные цвета - это какие? Куда ты собираешься кликать?
    – Grundy
    Commented 2 апр. 2022 в 18:20
  • @Grundy разве не имеется ввиду цвета которые находятся в canvas-е? (т.к. других цветов для выбора не имеется)
    – ΝNL993
    Commented 3 апр. 2022 в 8:26
  • @ΝNL993, цвета могут выбираться из какой-то палитры, сейчас для круга используется два цвета, какой из цветов задавать по клику - неизвестно
    – Grundy
    Commented 3 апр. 2022 в 8:50
  • @ΝNL993 у меня цвета получается находятся в кнопках, и из выбранной кнопки должен создаться круг на канвасе с соответствующим кнопке цветом, я отредактировал и добавил какие кнопки есть в вопрос, извините если запутал Commented 3 апр. 2022 в 12:12

1 ответ 1

1

Чтобы можно было задавать цвет, необходимо добавить в конструктор Circle соответствующий параметр

constructor(w, h, minR, maxR, color) {

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

// если передали `color` ставим его, иначе - случайный цвет
this.firstColor = color || `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
this.secondColor = color || `hsla(${Math.random() * 360}, 100%, 50%, 0)`;

Далее нужно добавить метод в GradientAnimation, который будет создавать круги с нужным цветом и добавлять их в массив

addCircle(color) {
    this.circles.push(new Circle(this.w, this.h, this.minRadius, this.maxRadius, color));
}

После создания объекта GradientAnimation, нужно добавить обработчики клика кнопок в которых вызывать метод addCircle с нужным цветом.

Пример:

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;

    this.circles = [];

    // это адаптация холста, будет выполнять че в фигурных скобках
    (window.onresize = () => {
      this.setCanvasSize();
      this.createCircles();
    })();
    //запуск анимации
    this.drawAnimation();

  }
  setCanvasSize() {
    this.w = this.cnv.width = innerWidth;
    this.h = this.cnv.height = innerHeight;
  }
  createCircles() {
    //чтоб совсем крыша не поехала надо запихать все в массив 
    for (let i = 0; i < this.circlesNum; ++i) {
      this.circles.push(new Circle(this.w, this.h, this.minRadius, this.maxRadius));
    }
  }

  addCircle(color) {
    this.circles.push(new Circle(this.w, this.h, this.minRadius, this.maxRadius, color));
  }
  clearCircles() {
    this.circles = [];
  }
  //вот тут то самое рисование кругов вызовом метода 
  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, color) {
    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 = color || `hsla(${Math.random() * 360}, 100%, 50%, 1)`;
    this.secondColor = color || `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 = () => {
  var anim = new GradientAnimation();
  document.querySelectorAll('.button').forEach(b => {
    if (b.classList.contains('color')) {
      b.addEventListener('click', () => {
        anim.addCircle(getComputedStyle(b)['borderColor']);
      })
    } else {
      b.addEventListener('click', () => {
        anim.clearCircles();
      })
    }
  });
}
body {
  margin: 0%;
}

canvas {
  display: block;
  background: hsl(222, 25%, 20%);
}


/* Стили кнопки */

.button {
  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%);
  /*белый*/
}
<div class="controls">
  <button class="button color button1">Зеленый</button>
  <button class="button color button2">Синий</button>
  <button class="button color button3">Красный</button>
  <button class="button color button4">Фиолетовый</button>
  <button class="button color button5">Черный</button>
  <button class="button clear button5">Очистить</button>
</div>
<canvas></canvas>

3
  • Громадное спасибо! Что стоит сделать, чтобы у созданного круга был градиент, или затухание ближе к краю? Если делать заранее заданный цвет secondColor то отлично оставляет градиент, и если заведомо два значения выставлять что для firsColor что для secondColor примерно то же самое, просто одноцвет Commented 3 апр. 2022 в 21:55
  • @АзарийКнязь, можешь задавать один цвет, второй так же случайно брать
    – Grundy
    Commented 3 апр. 2022 в 22:28
  • @Grundy Очевидно, что это круто! Commented 7 апр. 2022 в 13:24

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.