如何在html 5 canvas元素中绘制一个具有不同起始宽度和结束宽度的弧？

Question

我正在使用canvas元素。我需要在该画布中绘制一个具有不同起始宽度和结束宽度的弧

context.beginPath();

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

context.lineWidth = 15;

他们无法改变起始宽度和结束宽度。如何实现这个目标？

Answer 1

你需要做....

1. 获取您的开始和结束值并计算您想要对差异进行抽样的次数
2. 使用循环重复调用arc()，其中lineWidth值从开始到结束不等。
3. 如果你做得对，它会绘制一个宽度在起点和终点值之间变化的弧。

Answer 2

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

但是这是通过在起点周围反复旋转圆弧的“图像”来实现效果的一种方法。您可以使用内存中的画布创建“图像”。

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,Math.PI*6/4,Math.PI*2);
cc.stroke();


for(var i=0;i<10;i++){
  ctx.translate(100,100);
  ctx.rotate(Math.PI/360*i);
  ctx.drawImage(c,0,0);
  ctx.setTransform(1,0,0,1,0,0);
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

Answer 3

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

ctx.fillStyle = 'black';
ctx.beginPath();
ctx.moveTo(30, 70);
ctx.quadraticCurveTo(55, 132, 220, 68);
ctx.quadraticCurveTo(55, 115, 44, 70);
ctx.closePath();
ctx.fill();

<canvas id="canvas" width="300" height="300"></canvas>

它是如何工作的？您只需加入quadratic curve的两条路径即可。填写它。