在画布上绘制 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() 之后关闭路径并在矩形之前再次重新打开它，尝试在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" />