[英]Create a non filled arc in html5 canvas?
(简化):我已经创建了这个简单的代码来创建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();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.