(简化):我已经创建了这个简单的代码来创建一个arc
结果是:
但我不希望它充满红色。
我需要这样的东西:(用photoshop编辑)
(简单的话:,如果它是一个 div ,那么 style="border:solid 1px red;background-color:white"
)
问题 :
如何通过不填充整个形状来增强我的代码来做到这一点?是否有任何财产可以让我这样做?
(简化):我已经创建了这个简单的代码来创建一个arc
结果是:
但我不希望它充满红色。
我需要这样的东西:(用photoshop编辑)
(简单的话:,如果它是一个 div ,那么 style="border:solid 1px red;background-color:white"
)
问题 :
如何通过不填充整个形状来增强我的代码来做到这一点?是否有任何财产可以让我这样做?
一个简单的解决方法是绘制 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();