Javascript Canvas - 圆圈正在改变颜色答案

【问题标题】：Javascript Canvas - Circles are changing colorJavascript Canvas - 圆圈正在改变颜色
【发布时间】：2017-12-29 02:19:06
【问题描述】：

我在画布上绘制圆圈时遇到问题。当我在画布上画一个圆圈时效果很好，但如果我之后画一个正方形，我的圆圈的颜色会变为与正方形相同的颜色。

这已经困扰了我一段时间了。这是一个 jsbin 项目来演示我在说什么：

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

在此画布上，您可以绘制圆形和正方形（注意顶部的复选框以切换形状）。

我尝试将 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();
}

如果我在画布上应用动画循环，甚至会因为这个问题而开始出现更奇怪的效果。

任何想法为什么会发生这种情况？谢谢。

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

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

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

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

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

【讨论】：

谢谢。这确实适用于我与您共享的 jsbin 项目，但不适用于我的主项目。您可以在我对问题的编辑中查看它。谢谢您的帮助。这是一个正确方向的开始。我会继续努力的。
@AdamDay 我还是看不到 closePath 在这里被使用？ adam-day-com.stackstaging.com/Orbital/js/drawArrow.js 和 adam-day-com.stackstaging.com/Orbital/js/drawCircle.js
抱歉，我正在本地处理此问题，然后上传到虚拟主机服务。我忘了更新服务器上的文件。现在应该好了
我解决了。在填充矩形后，我的函数 drawSquare（或 drawArrow，如果你正在查看我的完整项目）调用 ctx.fill()。我猜 ctx.fill() 将颜色应用于最后绘制的圆圈。现在一切正常。感谢您的帮助。