Перерисовать линию вокруг точки на холсте - PullRequest
Новая
       41

Перерисовать линию вокруг точки на холсте

1 голос
/ 23 марта 2020

У меня есть некоторые проблемы. Я хочу заполнить холст несколькими строками вокруг указанной c точки холста. Результатом должен быть круг (желтое солнце) в правом среднем углу, окруженный лучами солнца. Результат должен выглядеть, например, как старый японский флаг. Моя главная проблема - нарисовать линию и скопировать ее несколько раз. (

1 Ответ

0 голосов
/ 23 марта 2020

Вы сказали, что ваша проблема - нарисовать линию и скопировать ее несколько раз
Это похоже на все oop рисование линий, это может быть фактическим для l oop или просто с setInterval или комбинацией и того, и другого, чтобы оживить его.

Вот несколько идей:

  • На этом мы рисуем линии прямо из центра, просто используя некоторую тригонометрию и некоторые случайность. 

    const canvas = document.getElementById("c");
canvas.width = canvas.height = 140;
const ctx = canvas.getContext("2d");
ctx.translate(canvas.width / 2, canvas.height / 2)

let r = 20;
let bars = 90;
function draw() {
  ctx.clearRect(-100, -100, 200, 200)

  for (var i = 0; i < 360; i += (360 / bars)) {
    var angle = i * ((Math.PI * 2) / bars);
    var x = Math.cos(angle) * r;
    var y = Math.sin(angle) * r;
    var v = Math.random() + 2;

    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x * v, y * v)
    ctx.stroke();
  }
}

setInterval(draw, 100)
    <canvas id="c"></canvas>

  • Это еще одна линия, прямая вниз, и мы позже поворачиваем холст 

    const canvas = document.getElementById("c");
canvas.width = canvas.height = 140;
const ctx = canvas.getContext("2d");
ctx.translate(canvas.width / 2, canvas.height / 2)

let r = 20;
var i = 0;

function draw() {
  ctx.beginPath();
  ctx.moveTo(r, -60);
  ctx.lineTo(r, 60)
  ctx.stroke();
  ctx.rotate(0.6)
  if (i++ > 20) {
    ctx.clearRect(-100, -100, 200, 200)
    i = 0
  }
}

setInterval(draw, 200)
    <canvas id="c"></canvas>
...