HTML5画布圆形文本 [英] HTML5 Canvas Circle Text

问题描述

如何使用画布创建圆形文字（圆形文字）？

How do I create circle text (text in a circle shape) with canvas?

推荐答案

字母现在应该正确定向：

Letters should now be properly oriented:

CanvasRenderingContext2D.prototype.fillTextCircle = function(text,x,y,radius,startRotation){
   var numRadsPerLetter = 2*Math.PI / text.length;
   this.save();
   this.translate(x,y);
   this.rotate(startRotation);

   for(var i=0;i<text.length;i++){
      this.save();
      this.rotate(i*numRadsPerLetter);

      this.fillText(text[i],0,-radius);
      this.restore();
   }
   this.restore();
}

使用范例：

var ctx = document.getElementById('canvas').getContext('2d');
ctx.font = "bold 30px Serif";
ctx.fillTextCircle("Circle Text ",150,150,75,Math.PI / 2);

字符串末尾的额外空格增加了一些额外的填充。

The extra space at the end of the string adds some extra padding.

示例输出：

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