如何使用HTML5 Canvas绘制无多余直线的圆环

你当前的代码绘制圆环时出现黑色直线，原因是stroke()会绘制整个路径的轮廓——你定义的两个圆弧路径，起点和终点之间被stroke自动连接，从而产生了多余的黑线。以下是几种解决方法：

方案1：移除不必要的stroke调用（无需描边时） #

如果只需要红色填充的圆环，直接去掉stroke()即可，修改后的代码如下：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
ctx.beginPath()
ctx.arc(100,100,100,0,Math.PI*2,false); // 绘制外圆
ctx.arc(100,100,55,0,Math.PI*2,true); // 反向绘制内圆，实现镂空效果
ctx.fillStyle='red';
ctx.fill();

方案2：分开处理填充与描边路径（需要描边时） #

将填充和描边的路径分开定义，避免路径连接导致的黑线：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

// 第一步：填充红色圆环
ctx.beginPath()
ctx.arc(100,100,100,0,Math.PI*2,false);
ctx.arc(100,100,55,0,Math.PI*2,true);
ctx.fillStyle='red';
ctx.fill();

// 第二步：单独描出外圆轮廓
ctx.beginPath();
ctx.arc(100,100,100,0,Math.PI*2,false);
ctx.strokeStyle='black';
ctx.lineWidth=1;
ctx.stroke();

// 第三步：单独描出内圆轮廓
ctx.beginPath();
ctx.arc(100,100,55,0,Math.PI*2,false);
ctx.stroke();

方案3：用描边方式直接绘制圆环（更简洁） #

通过设置合适的线宽和圆弧半径，直接描出圆环，逻辑更直观：

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

// 绘制红色圆环：半径取内外半径的平均值，线宽等于内外半径之差
ctx.beginPath();
ctx.arc(100,100,77.5,0,Math.PI*2,false); // (100+55)/2 = 77.5
ctx.strokeStyle='red';
ctx.lineWidth=45; // 100-55 = 45
ctx.stroke();

// 按需添加内外圆的黑色描边
ctx.beginPath();
ctx.arc(100,100,100,0,Math.PI*2,false);
ctx.strokeStyle='black';
ctx.lineWidth=1;
ctx.stroke();

ctx.beginPath();
ctx.arc(100,100,55,0,Math.PI*2,false);
ctx.stroke();

内容的提问来源于stack exchange，提问作者Jim Andrews