在画布上的点周围重画一条线

debugcn 发表于 Dev

用户名

我有一些问题。我想在特定画布点周围用多行填充画布。结果应该是在右中角被一些阳光包围的圆圈（黄色的太阳）。例如，结果应看起来像旧的日本国旗。我的主要问题是画一条线并将其复制多次。:(

清除棕褐色

您说过您的问题是绘制一条线并将其复制多次，
这听起来像是一条循环绘制线，它可能是实际的for循环，也可能只是使用asetInterval或两者的组合来对其进行动画处理。

这里有一些想法：

在此基础上，我们仅使用一些三角函数和一些随机性就从中心直线画出直线。

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)