0

(简化):我已经创建了这个简单的代码来创建一个arc

jsbin

结果是:

在此处输入图像描述

但我希望它充满红色。

我需要这样的东西:(用photoshop编辑)

在此处输入图像描述

(简单的话:,如果它是一个 div ,那么 style="border:solid 1px red;background-color:white"

问题 :

如何通过不填充整个形状来增强我的代码来做到这一点?是否有任何财产可以让我这样做?

4

1 回答 1

1

一个简单的解决方法是绘制 2 条弧线:一条红色的 alineWidth为 10,然后另一条顶部为白色,alineWidth为 6 或 8。

注意:奇数可能会产生更好的结果(11 和 9/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();

jsbin

于 2013-07-29T08:06:37.743 回答