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

查看:111
本文介绍了使用画布创建弧形文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆