绘制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" />