Javascript 如何在HTML5画布元素中绘制具有不同起始和结束宽度的弧？

我正在处理n个画布元素。我需要在画布上画一条不同起始宽度和结束宽度的弧

context.beginPath();

context.arc(x, y, radius, startAngle, endAngle, counterClockwise);

context.lineWidth = 15;

---

他们没有更改起始宽度和结束宽度的选项。如何做到这一点？

您需要做

获取“开始”和“结束”值，并计算出要对差异进行采样的次数

使用循环重复调用

arc（）

，使用从开始到结束的不同

线宽值

如果操作正确，它将绘制一条宽度在“开始”和“结束”值之间变化的圆弧

---

所有画布路径命令都绘制单宽度笔划

但这里有一种方法可以实现你的效果，就是围绕你的起点反复旋转一个弧形的“图像”。您可以使用内存画布创建“图像”

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var c=document.createElement（'canvas'）；
var cc=c.getContext（'2d'）；
cc.beginPath（）；
cc.arc（0,52,50，数学PI*6/4，数学PI*2）；
cc.stroke（）；
对于（var i=0；i
var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'）；
ctx.fillStyle='黑色'；
ctx.beginPath（）；
ctx.moveTo（30,70）；
四次曲线（55132220，68）；
四次曲线（55,115,44,70）；
ctx.closePath（）；
ctx.fill（）；
你的意思是要在起始宽度和结束宽度之间进行插值吗？不。我需要在起始处绘制一个弧宽度为1，在结束处绘制一个弧宽度应为5。我需要这样做。这就是插值宽度：）嗨..亚历克斯很难理解..你能有任何JSFIDLE吗？