像画布中的垂直弧线一样的文本答案

【问题标题】：text like a vertical arc in canvas像画布中的垂直弧线一样的文本
【发布时间】：2018-11-13 08:45:33
【问题描述】：

有没有办法使用画布创建弧形文本？我在这里遵循了我们的答案：

How to make rooftext effect and valley text effect in HTML5 (or Fabric.js)

我得到的最好的东西是从屋顶或底部弯曲。我想要这样的弧线：

【问题讨论】：

Bridge Text Effect in HTML5 Canvas的可能重复

标签： jquery html canvas html5-canvas

【解决方案1】：

这是画布代码：

https://codepen.io/creativedev/pen/oybGMQ

function drawTextArc(context, str, centerX, centerY, radius, angle) {
  var len = str.length,
    s;
  context.save();
  context.translate(centerX, centerY);
  context.rotate(-1 * angle / 2);
  context.rotate(-1 * (angle / len) / 2);
  for (var n = 0; n < len; n++) {
    context.rotate(angle / len);
    context.save();
    context.translate(0, -1 * radius);
    s = str[n];
    context.fillText(s, 0, 0);
    context.restore();
  }
  context.restore();
}
var canvas = document.getElementById('myCanvas'),
  context = canvas.getContext('2d'),
  centerX = canvas.width / 2,
  centerY = canvas.height - 30,
  angle = Math.PI * 0.8,
  radius = 150;

context.font = '30pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'green';
context.lineWidth = 4;
drawTextArc(context, 'Vertical Arc', centerX, centerY, radius, angle);

// draw circle underneath text
context.arc(centerX, centerY, radius - 10, 0, 2 * Math.PI, false);

【讨论】：