在另一个圆形画布内绘制一个圆圈答案

【问题标题】：Drawing a circle inside another circle canvas在另一个圆形画布内绘制一个圆圈
【发布时间】：2013-09-20 02:01:41
【问题描述】：

我正在尝试在 Canvas 中绘制一个齿轮，但从一开始就遇到了问题。我想要一个实心圆圈，中间有一个神圣的圆圈。相反，我得到的只是一个圆圈的轮廓。

这是我的代码：

var ctx = document.getElementById("canvas").getContext("2d"),
i = 0;

function drawGear(){

    ctx.fillStyle = "#000";
    ctx.translate(50,50);
    ctx.arc(0,0,20,0,Math.PI*2);
    ctx.fill();

    ctx.fillStyle = "#FFF";;
    ctx.arc(0,0,5,0,Math.PI*2);
    ctx.fill();
}

drawGear();

http://jsfiddle.net/te3jn/

我认为问题与 globalCompositeOperation 有关，但我尝试了其中几个（source-over、source-atop、destination-over），但似乎都没有按我想要的方式工作。

【问题讨论】：

标签： javascript html canvas drawing

【解决方案1】：

绘制第二个圆圈时应该开始一条新路径，如下所示：

ctx.fill();

ctx.beginPath();
ctx.fillStyle = "#FFF";
// ...

JS Fiddle.

如果没有这个，您实际上将使用第二个 fill 调用（查看 this fiddle 进行演示）重绘两个圆圈 - 内圈和外圈）

【讨论】：