在另一个圆画布内绘制一个圆

Drawing a circle inside another circle canvas

本文关键字：一个 绘制 另一个 布内      更新时间：2023-09-26

我正在尝试在 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有关，但我尝试了其中的几个（源端，源顶端，目的地上），似乎没有一个按照我想要的方式工作。

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

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

JS小提琴。

如果没有这个，你基本上会用第二个fill调用重新绘制两个圆圈 - 内圆圈和外圆圈（检查此小提琴进行演示）

相关文章：