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

在画布上绘制2种不同颜色的形状

1 个答案: