如何使用HTML5 Canvas将Arc转换为线？

Question

我想将一个圆圈设置成一条半径等于宽度的线，我想知道如何用弧线做到这一点？或许还有更好的方法？

从

至

这是我的弧线：

function drawStar(x,y,size,scale,opacity,ctx){
  ctx.save();
  ctx.beginPath();
  ctx.arc(x,y,size+scale,0,size+scale * Math.PI,false);
  ctx.globalAlpha = opacity
  ctx.closePath();
  setFillStyle('rgb(255,237,219)',ctx);
  ctx.fill()
  ctx.restore();
}

我尝试使用ctx.scale（n，1），但是它没有保持相同的半径（宽度）并且它整体上缩放了弧的集合（放大效果）。

Answer 1

使用带有“圆形”lineCap和stroke()的宽线宽值：

var ctx = c.getContext("2d");
ctx.lineWidth = 50;
ctx.lineCap = "round";

ctx.moveTo(45  , 25);
ctx.lineTo(45.5, 25);  // in IE11 this must be slightly offset

ctx.moveTo( 45, 100);
ctx.lineTo(150, 100);
ctx.stroke();

<canvas id=c></canvas>

请记住beginPath()动画。

Answer 2

您可以使用arc绘制圆圈的左半部分和右半部分，然后在其间进行fillRect连接。

编辑：详细说明我之前所说的内容：

function init() {
  let canvas = document.getElementById('myCanvas');

  canvas.width = 400;
  canvas.height = 400;
  canvas.style.width = "400px";
  canvas.style.height = "400px";

  let ctx = canvas.getContext("2d");

  function fillArc(ctx, cx, cy, r, startDeg, endDeg) {
    ctx.beginPath();
    ctx.arc(cx, cy, r, startDeg * Math.PI / 180, endDeg * Math.PI / 180);
    ctx.fill();
  }

  function fillOval(ctx, cx, cy, r, sideLength, skipFirstArc) {
    if (!skipFirstArc) {
      fillArc(ctx, cx, cy, r, 90, 270);
    }

    ctx.fillRect(cx, cy - r, sideLength, r * 2);
    fillArc(ctx, cx + sideLength, cy, r, 270, 90);
  }

  let sideLength = 0;
  ctx.fillStyle = 'red';

  function animateOval() {
    if (sideLength === 100) {
      ctx.clearRect(0, 0, 400, 400);
    }
    else {
      fillOval(ctx, 30, 30, 25, sideLength, sideLength > 0);
    }

    ++sideLength;

    if (sideLength > 100) {
      sideLength = 0;
    }
  }

  setInterval(animateOval, 16);
}

这是一个运行上述代码的Plunker：http://plnkr.co/edit/vNqoUjPKg2lqC7JtYuEb?p=preview

Answer 3

您可以使用Bezier Curves来转化＆＃39;你的弧线。

在计算拉伸圆圈的完美结束时有一些math involved，但我猜测并调整了我的数字。

＆＃13;

＆＃13;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();     
ctx.moveTo(40, 20);
ctx.lineTo(100, 20);
ctx.bezierCurveTo(130, 20, 130, 60, 100, 60);
ctx.lineTo(40, 60);
ctx.bezierCurveTo(10, 60, 10, 20, 40, 20);
ctx.stroke();
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(40, 80);
ctx.bezierCurveTo(68, 80, 68, 120, 40, 120);
ctx.bezierCurveTo(12, 120, 12, 80, 40, 80); 
ctx.fill();
ctx.stroke();

＆＃13;

<canvas id="myCanvas"></canvas>

＆＃13;

＆＃13;

＆＃13;