Question

我会自动绘制线条，这很有趣，我希望它回到中间并在超出画布大小时更改颜色。一切都完成了，它很好地返回中间，并且颜色也很好地改变了。但是有点问题！我之前已经绘制的所有线条都更改为相同的颜色。...我一直在寻找一个小时没有解决方法的^^

你能帮我吗？

这是我认为最重要的代码部分：

有我的电话！

function Line(x0, y0, x1, y1, color) {
              this.x0 = x0;
              this.y0 = y0;
              this.x1 = x1;
              this.y1 = y1;
              this.color = color;
              this.draw = function() {
                ctx.strokeStyle = this.color;
                ctx.moveTo(this.x0, this.y0,)
                ctx.lineTo(this.x1, this.y1);
                ctx.stroke();
              }
            }

我有创建行的功能！

var x = cx;
var y = cy;
var color = randomColor();
var lines = [];

function loop() {
    var newx = randomPoint(x, 100);
    var newy = randomPoint(y, 100);
    var line = new Line(x, y, newx, newy, color);
    x = newx;
    y = newy;

    lines.push(line);

    if(x > canvas.width || y > canvas.height || x < 0 || y < 0) {
        x = cx;
        y = cy;
        color = randomColor();
    }

    lines[0].draw();
    lines = [];

    time = setTimeout(loop, 50);
}

Answer 1

您需要在ctx.beginPath()函数的顶部添加一个draw：

class Line {
  constructor(x0, y0, x1, y1, color) {
    this.x0 = x0;
    this.y0 = y0;
    this.x1 = x1;
    this.y1 = y1;
    this.color = color;
  }
  
  draw(ctx) {
    ctx.beginPath();
    ctx.strokeStyle = this.color;
    ctx.lineWidth = 4;
    ctx.moveTo(this.x0, this.y0);
    ctx.lineTo(this.x1, this.y1);
    ctx.stroke();
  }
} 

function randomColor() {
  return ['red', 'green', 'blue', 'yellow', 'cyan', 'magenta'][Math.random() * 6 | 0];
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const maxWidth = window.innerWidth;
const maxHeight = window.innerHeight;
const cx = maxWidth / 2 | 0;
const cy = maxHeight / 2 | 0;

canvas.width = maxWidth;
canvas.height = maxHeight;

let counter = 0;
let x0 = cx;
let y0 = cy;
let color = randomColor();

function drawLine() {
    const x1 = x0 + Math.random() * 200 - 100;
    const y1 = y0 + Math.random() * 200 - 100;
    
    new Line(x0, y0, x1, y1, color).draw(ctx);
    
    x0 = x1;
    y0 = y1;

    if (x0 < 0 || y0 < 0 || x0 > maxWidth || y0 > maxHeight) {
        x0 = cx;
        y0 = cy;
        color = randomColor();
    }
    
    if (++counter > 500) {
      clearInterval(intervalID);
    }
}

const intervalID = setInterval(drawLine, 100);

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#canvas {
  width: 100%;
  height: 100%;
}

<canvas id="canvas"></canvas>

但是，请注意，使用这种方法时，不同线段之间的连接看起来并不连续（连接越尖锐，越明显），因此您可能更喜欢仅在更改颜色和颜色时才创建新路径。回到中心：

const COLORS = ['red', 'green', 'blue', 'yellow', 'cyan', 'magenta'];
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const maxWidth = window.innerWidth;
const maxHeight = window.innerHeight;
const cx = maxWidth / 2 | 0;
const cy = maxHeight / 2 | 0;

canvas.width = maxWidth;
canvas.height = maxHeight;
ctx.lineWidth = 4;
ctx.lineJoin = 'round';

let counter = -1;
let currentColor = -1;
let x = -1;
let y = -1;

function drawLines() {
  if (x < 0 || y < 0 || x > maxWidth || y > maxHeight) {
    ctx.beginPath();
    ctx.strokeStyle = COLORS[currentColor = (currentColor + 1) % COLORS.length];
    ctx.moveTo(x = cx, y = cy);
  }

  x += Math.random() * 200 - 100;
  y += Math.random() * 200 - 100;

  ctx.lineTo(x, y);
  ctx.stroke();

  if (++counter === 500) {
    clearInterval(intervalID);
  }
}

const intervalID = setInterval(drawLines, 100);

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#canvas {
  width: 100%;
  height: 100%;
}

<canvas id="canvas"></canvas>

当我更改一行时，画布中的所有行都会更改颜色

1 个答案: