使用画布创建弧形文本 [英] Create an arc text using canvas

问题描述

是否可以使用画布创建弧形文本？我在这里遵循了答案：

Is there any way to create an arc text using canvas? I followed the answer our here:

如何在HTML5（或Fabric.js）中制作屋顶文字效果和山谷文字效果

我得到的最好的东西是屋顶或底部的曲线。

Best thing I got was curve from roof or bottom. Is there any any to create an arc in canvas?

推荐答案

尝试用此方法使文本在apper中生成。

Try this for making text to apper in arc.

function drawTextAlongArc(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 = 'red';
      context.strokeStyle = 'blue';
      context.lineWidth = 4;
      drawTextAlongArc(context, 'Arc Canvas Text', centerX, centerY, radius, angle);

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

#canvas{
  display:block;
  margin:0 auto;
}

<canvas id="myCanvas" width="578" height="250"></canvas>

这篇关于使用画布创建弧形文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！