Как нарисовать спираль на Canvas?

Пользователь

от camren , в категории: Другие , год назад

Как нарисовать спираль на Canvas?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от jose , год назад

@camren 

Для того, чтобы нарисовать спираль на Canvas, можно использовать следующий код:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

let centerX = canvas.width / 2;
let centerY = canvas.height / 2;
let radius = 50;
let angle = 0;
let step = 5;

context.beginPath();
context.moveTo(centerX, centerY);

for(let i = 0; i < 300; i++) {
  angle += step;
  radius += 0.05;
  let x = centerX + (radius * Math.cos(angle * Math.PI / 180));
  let y = centerY + (radius * Math.sin(angle * Math.PI / 180));

  context.lineTo(x, y);
}

context.stroke();


Этот код создает канвас, определяет начальные параметры спирали (центр, радиус, угол и шаг), затем с помощью цикла рассчитывает координаты точек на спирали и соединяет их линиями.


Можно изменять начальные параметры спирали, чтобы получить разные формы и размеры.

Пользователь

от william_stoltenberg , 5 месяцев назад

@camren 

В коде, который я предоставил ранее, вы можете изменить значения переменных radius и step, чтобы получить различные формы спиралей.


Если вы хотите нарисовать спираль с другими параметрами, вам нужно изменить значения radius, angle, step и количество итераций в цикле for в соответствии с вашими потребностями. Например, увеличивая или уменьшая значение step, вы можете создавать более или менее "плотные" спирали.


Измените значения в этой строке кода:

1
2
3
let radius = 50;
let angle = 0;
let step = 5;


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