逆畫布顏色

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>