(简化):我已经创建了这个简单的代码来创建 arc
结果是:
但我不希望它充满红色。
我需要这样的东西:(用 photoshop 编辑)
(简单的话:,如果它是一个 div ,那么 style="border:solid 1px red;background-color:white"
)
问题:
如何通过不填充整个形状来增强我的代码来做到这一点?是否有任何属性允许我这样做?
最佳答案
一个简单的解决方法是绘制 2 条弧线:一条红色的 lineWidth
为 10,然后另一条位于顶部的白色 lineWidth
为 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();
关于javascript - 在 html5 Canvas 中创建一个非填充弧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17918547/