Отрисовка особого круга на канвасе

Question

Имеется круг на канвасе

var canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(500,300, 250, 0, 2 * Math.PI, false);
ctx.stroke();

Также есть ползунок под этим кругом

<input type="range" min="0" max="30" step="1" id="range">

Задача вообще нетривиальная, но нужна для одного прикольного математического фокуса. Необходимо, чтобы по дефолту на круге стояло 10 точек, от 0 до 9, на равном расстоянии. При изменении ползунка должны добавляться точки, то есть в положении ползунка 0 точек 10, в положении 1 11 итд, при этом разумеется точки должны раздвигаться, чтобы между ними было все время равное расстояние, и еще подписи возле каждой точки. Данная схема реализуема на канвасе, или нужна какая-то другая магия? :D

Answer 1

Можно просто вращать круг и расставлять точки)).

let canvas = document.getElementById('canvas');

window.onresize = render;

function render(){
  let ctx = canvas.getContext('2d');

  let w = canvas.width = window.innerWidth - 10;
  let h = canvas.height = window.innerHeight - 20;
  
  let x = w/2;
  let y = h/2;
  let radius = Math.min(w/2, h/2) - 25;

  let inp = document.getElementById('inp');
  inp.style.width = `${w - 10}px`;

  inp.oninput = () => {
  ctx.clearRect(0,0,w,h);
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI*2);
  ctx.stroke();
  let num = inp.value;
  let angle = Math.PI*2/num;
  ctx.save();
  ctx.translate(x, y);
  ctx.font = '12px serif';
  ctx.textAlign = 'center';

  for(let i=0; i < num; i++){
      ctx.beginPath();
      ctx.arc(0, -radius, 3, 0, Math.PI*2);
      ctx.fill();
      ctx.fillText(`${i}`, 0, - (radius + 6), 12);
      ctx.rotate(angle);
  }
  ctx.restore();
  }

  inp.dispatchEvent(new Event('input'));
}

render();

canvas {
  position: fixed;
  top: 20px;
  left: 5px;
}

input {
  position: fixed;
  top: 0px;
  left: 5px;
  z-index: 1;
  outline: none;
}

<input type="range" value="10" id="inp" min="0" max="30">
<canvas id="canvas"></canvas>

БЛОГ НА HUSL

Отрисовка особого круга на канвасе

Ответы (1 шт):