围绕 canvas 中的一个点重画一条线

Question

我遇到了一些问题。我想用围绕特定 canvas 点的多条线填充 canvas。结果应该是右中角的一个圆圈（黄色太阳），周围环绕着一些太阳光束。例如，结果应该看起来有点像旧的日本国旗。我的主要问题是画一条线并多次复制。 :(

Answer 1

你说你的问题是画线复制多次
这听起来像是一个循环画线，它可能是一个实际的 for 循环，或者只是一个 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>

另一条直线向下，我们稍后旋转 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>

围绕 canvas 中的一个点重画一条线

Redraw a line around a point in a canvas

canvas

rotation

line