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

Question

我正在处理 n canvas 个元素。我需要在 canvas 中画一条弧线，起始宽度和结束宽度不同

context.beginPath();

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

context.lineWidth = 15;

他们没有更改起始宽度和结束宽度的选项。如何实现？

Answer 1

你需要做....

获取您的开始值和结束值并计算出您想要对差异进行采样的次数
使用循环重复调用 arc()，从开始到结束使用不同的 lineWidth 值。
如果你做对了，它会绘制一个圆弧，其宽度在你的开始值和结束值之间变化。

Answer 2

所有 canvas 路径命令绘制 mono-width 笔画。

但这里有一种实现效果的方法，即围绕起点重复旋转 "image" 弧线。您可以使用 in-memory canvas.

创建 "image"

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 的 2 条路径。并填满它。

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

how to draw an arc in html 5 canvas element with different starting and end width?

html

javascript

canvas