添加隨機顏色生成線

Question

我開始學習JavaScript，我想隨機顏色添加到被該項目產生的每個隨機行...

var c = document.createElement('canvas'); 
document.body.appendChild(c); 
var ctx = c.getContext('2d'); 
c.width = window.innerWidth; 
c.height = window.innerHeight; 
var position = 0; 

ctx.lineWidth = window.prompt("what line width do you want?","0.5"); 

ctx.color = "#"+((1<<24)*Math.random()|0).toString(16); 

function animateCircle(position) { 
    ctx.clearRect(0,0,c.width,c.height); 
    ctx.arc(c.width/2,c.height/2,(c.width > c.height ? c.height : c.width)/3,position,position+Math.random()*10,false);ctx.stroke(); 
} 
window.setInterval(function() { 
    animateCircle(position); 
    position += 3; 
}, 10); 

我想它做它使每一個生成的線每次都是不同的隨機顏色，所以我嘗試使用ctx.color，但它似乎不適用於生成的線，而是保持默認顏色黑色。它看起來完全在跳過它。而當我打印它的腳本似乎甚至不開始... 但我的ctx.color不起作用，我不明白爲什麼.. 請幫助 謝謝。

Answer 1

使用strokeStyle，而不是顏色。有一對夫婦的其他問題，你會發現，以及我指出如下：

function animateCircle(position) { 

    ctx.strokeStyle = "#"+((1<<24)*Math.random()|0).toString(16); 

    ctx.clearRect(0,0,c.width,c.height); 

    /// remember beginPath() here or the arc will accumulate 
    ctx.beginPath(); 
    ctx.arc(c.width/2,c.height/2,(c.width > c.height ? c.height : c.width)/3,position,position+Math.random()*10,false); 
    ctx.stroke(); 
} 

要畫一條線，用它來代替arc()：

ctx.moveTo(x1, y1); /// replace x and y with your positions 
ctx.lineTo(x2, y2); 
ctx.stroke(); 

增加間隔應至少16ms的

window.setInterval(function() { 
    animateCircle(position); 
    position += 3; 
}, 16); 

或優選使用requestAnimtionFrame更平滑的動畫：

(function loop() { 
    animateCircle(position); 
    position += 3; 
    requestAnimtionFrame(loop); 
})(); 

Answer 2

你在找什麼是strokeStyle，而不是color。嘗試：

function animateCircle(position) { 
    ctx.strokeStyle = "#"+((1<<24)*Math.random()|0).toString(16); 
    ctx.arc(c.width/2,c.height/2,(c.width > c.height ? c.height : c.width)/3,position,position+Math.random()*10,false); 
    ctx.stroke(); 
} 

您會有意想不到的結果（即：我讓你發現），但它應該幫助你瞭解更多的關於帆布:)