在 canvas 上绘制 2 个不同颜色的形状

Question

我有一个函数 draw，我尝试在 canvas 上绘制一个黑色圆圈和一个黄色矩形：

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

在 canvas 上绘制 2 个不同颜色的形状

Drawing 2 shapes in different colors on canvas

javascript

html

canvas