Question

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

这一直困扰着我一段时间。这是一个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

尝试查看“显示矢量字段”＆＃39;框并添加一些行星。绘制矢量场的功能（在动画循环中调用）绘制了一系列细小的框，它会混淆圆形颜色。

Answer 1

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

Javascript画布 - 圆圈正在改变颜色

1 个答案: