逆画布颜色

Question

我有一段代码可以开发一种数学形状，没有什么特别的，在白色背景上建立的白色几何形状。我可以更改画布标记中的背景颜色以及构建该形状的线的颜色。即使当我改变画布颜色时，问题仍然是黑色正方形。我的目标是颠倒颜色，从白色的黑色背景变成黑色的白色背景。 （对不起，我缺乏的代码格式的了解，我是新来的）

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。

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();

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

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