Javascript 在html5画布中创建非填充弧？

（简化）：我已经创建了这个简单的代码来创建一个

arc

结果是：

但我不想让它充满红色

我需要这样的东西：（用photoshop编辑）

（简单的单词：，如果它是一个div，那么

style=“border:solid 1px red；background color:white”

）

问题:

---

如何通过不填充整个形状来增强代码以实现这一点？有什么属性允许我这样做吗？

一个简单的解决方法是画两条弧：一条红色的

线宽为10，另一条在顶部为白色，线宽为6或8

注：奇数可能会产生更好的结果（11和9/7）：

谢谢Aaron…请详细说明奇数可能会产生更好的结果（11和9/7）：？奇数线宽有时在绘制它们时会产生更好的结果，因为它们不会导致舍入错误-这看起来很奇怪。想象一条宽度为6的线，从5,0到5,10绘制。将设置哪些像素？5-6/2=5-3=2到5+3=8。但这意味着该线没有居中，因为绘图位置左侧有三个黑色像素，右侧只有两个：
***x**
，其中“x”是起始坐标<代码>***x***

（=宽度7）在两侧具有相同数量的像素。所以当你开始旋转这条线时，它不会突然“跳跃”。

  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');

  var x = canvas.width / 2;
  var radius = 55;

  var y = canvas.height / 2;

  context.beginPath();

  var startAngle = 1.1 * Math.PI;
  var endAngle = 1.9 * Math.PI;
  var delta = 0.005 * Math.PI;
  context.arc(x, y, radius, startAngle, endAngle  , false);
  context.lineWidth = 11;

  context.strokeStyle = 'red';
  context.stroke();

  context.beginPath();
  context.arc(x, y, radius, startAngle+delta, endAngle-delta, false);
  context.lineWidth = 9;

  context.strokeStyle = 'white';
  context.stroke();