在画布上绘制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);
}

每40毫秒使用setInterval调用一次此函数（稍后需要使用它来创建特定的圆形动画）。 由于某种原因，两个形状都被绘制为黄色。

我尝试在context.fill()之后关闭Path并在矩形之前再次将其重新打开，尝试在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" />