Javascript Canvas - 圆圈正在改变颜色

Question

我在 Canvas 上绘制圆圈时遇到问题。当我在 Canvas 上绘制一个圆圈时，它工作正常，但如果我随后绘制一个正方形，圆圈的颜色会变为与正方形相同的颜色。

这个问题已经困扰我一段时间了。这是一个 jsbin 项目来演示我正在谈论的内容:

https://jsbin.com/bajezudayi/edit?html,js,output

在此 Canvas 上，您可以绘制圆形和正方形(请注意顶部的复选框以切换形状)。

我尝试将drawCircle中的颜色变量更改为设定值而不是函数参数，但问题仍然存在。

function drawCircle(x,y,rad,col,ctx){
  // This function draws a circle on a canvas
    ctx.save();
    ctx.translate(x,y);
    ctx.beginPath();
    ctx.arc(0,0,rad,0,2*Math.PI,false);
    ctx.fillStyle='red'; // rather than =col
    ctx.fill();
    ctx.restore();
}

如果我将动画循环应用到 Canvas 上，由于这个问题，甚至会开始发生更奇怪的效果。

有什么想法为什么会发生这种情况吗？谢谢。

编辑:这是我目前正在进行的完整项目:

http://adam-day-com.stackstaging.com/orbital/index.html

尝试选中“显示矢量场”框并添加一些行星。绘制矢量场的函数(在动画循环中调用)绘制了一系列细长的方框，并且弄乱了圆圈的颜色。

Answer 1

我添加了 ctx.beginPath() 和 ctx.closePath() ，一切似乎工作正常。这是你想要的吗？ https://jsbin.com/ribiyodoru/edit?html,js,output