繪製2個形狀不同的顏色在畫布上

Question

我有一個函數draw中，我試圖繪製畫布上的黑圈和黃色矩形：

function draw() { 
    context.clearRect(0, 0, window.innerWidth, window.innerHeight); 
    context.fillStyle = '000000'; 
    context.beginPath(); 
    context.arc(ballx, bally, radius, 0, Math.PI * 2); 
    context.fill(); 
    context.fillStyle = '#F7CA18'; 
    context.fillRect(0, 0, 50, 5); 
} 

該函數被調用與setInterval每40ms （我需要它以後創建一個特定的圓形動畫）。由於某種原因，兩種形狀都被繪製成黃色

我試圖在context.fill()之後關閉路徑並在矩形之前再次打開它，試圖在fillRect之後再次定義黑色填充，嘗試了更多的事情，但沒有成功。

任何想法如何解決它？

Answer 1

你有黑色的錯字（錯過了 「＃」）：

context.fillStyle = '#000000'; 

工作例如：

function draw(context, ballx, bally, radius) { 
 
    context.clearRect(0, 0, window.innerWidth, window.innerHeight); 
 
    context.fillStyle = '#000000'; 
 
    context.beginPath(); 
 
    context.arc(ballx, bally, radius, 0, Math.PI * 2); 
 
    context.fill(); 
 
    context.fillStyle = '#F7CA18'; 
 
    context.fillRect(0, 0, 50, 5); 
 
} 
 

 
var i = 50; 
 
setInterval(function() { 
 
    draw(document.getElementById('canvas').getContext('2d'), 50 + i++, 50, 50); 
 
}, 40);

<canvas id="canvas" />