反向画布颜色

Question

我有一段代码可以开发出数学形状，没什么特别的，白色的几何形状构建在白色背景上。我可以更改canvas标签中的背景颜色，以及构建形状的线条的颜色。问题是，即使我更改画布颜色，黑色方块仍然存在。我的目标只是颠倒颜色，从白色形状的黑色背景到白色背景的黑色形状。 （对不起我对代码格式的理解不足，我是新来的）

var canvas;
var ctx;
var canvasWidth = 600;
var canvasHeight = 600;

var circleR = 300;
var timeout = 0;
var often = 15;

function init() {
  if (location.hash)
    often = 5;
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  drawLines();
}

function drawLines() {
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  ctx.translate(canvasWidth / 2, canvasHeight / 2);
  for (var i = 0; i < 25; i++) {
    for (var a = -45; a <= 45; a += often) {
      setTimeout("drawTimeout(" + a + ");", 100 * timeout);
      timeout++;
    }
  }
}

function drawTimeout(a) {
  ctx.beginPath();
  ctx.moveTo(0, circleR);
  var radians = Math.PI / 180 * a;
  var x = (circleR * Math.sin(radians)) / Math.sin(Math.PI / 2 - radians);
  ctx.lineTo(x, 0);

  if (Math.abs(a) == 45) {
    ctx.strokeStyle = "rgb(255,255,255)";
    ctx.lineWidth = 1;
  } else if (a == 0) {
    ctx.strokeStyle = "rgb(200,200,200)";
    ctx.lineWidth = 0.5;
  } else {
    ctx.strokeStyle = "rgb(110,110,110)";
    ctx.lineWidth = 0.2;
  }
  ctx.stroke();
  ctx.rotate((Math.PI / 180) * 15);
}

function redirect() {
  if (window.location.hash) window.location.href = '';
  else window.location.href = '#more';
  window.location.reload(true);
}
init();

body {
      margin: 0;
      background-color: black;
    }
    canvas {
      display: block;
      margin: 10px auto;
      background-color: black;
    }

<canvas id="canvas" width="600" height="600"></canvas>

Answer 1

这是动画的黑色版本，没有做太多改动，只是笔触颜色和css。

＆＃13;

＆＃13;

var canvas;
var ctx;
var canvasWidth = 600;
var canvasHeight = 600;

var circleR = 300;
var timeout = 0;
var often = 15;

function init() {
  if (location.hash)
    often = 5;
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  ctx.fillStyle = "#FFF";
  drawLines();
}

function drawLines() {
  ctx.fillRect(0, 0, canvasWidth, canvasHeight);
  ctx.translate(canvasWidth / 2, canvasHeight / 2);
  for (var i = 0; i < 25; i++) {
    for (var a = -45; a <= 45; a += often) {
      setTimeout("drawTimeout(" + a + ");", 100 * timeout);
      timeout++;
    }
  }
}

function drawTimeout(a) {
  ctx.beginPath();
  ctx.moveTo(0, circleR);
  var radians = Math.PI / 180 * a;
  var x = (circleR * Math.sin(radians)) / Math.sin(Math.PI / 2 - radians);
  ctx.lineTo(x, 0);
  // store a variable for our color, since you only use shades of grey;
  var c;
  if (Math.abs(a) == 45) {
    c = 0; // 255-255
    ctx.strokeStyle =  "rgb("+c+","+c+","+c+")";
    ctx.lineWidth = 1;
  } else if (a == 0) {
    c = 55; // 255-200
    ctx.strokeStyle =  "rgb("+c+","+c+","+c+")";
    ctx.lineWidth = 0.5;
  } else {
    c = 145; // 255-110
    ctx.strokeStyle =  "rgb("+c+","+c+","+c+")";
    ctx.lineWidth = 0.2;
  }
  ctx.stroke();
  ctx.rotate((Math.PI / 180) * 15);
}

function redirect() {
  if (window.location.hash) window.location.href = '';
  else window.location.href = '#more';
  window.location.reload(true);
}
init();

＆＃13;

body {
  margin: 0;
  background-color: black;
}
canvas {
  display: block;
  margin: 10px auto;
  background-color: white;
}

＆＃13;

<canvas id="canvas" width="600" height="600"></canvas>

＆＃13;

＆＃13;

＆＃13;