HTML5 画布圆形文本 [英] HTML5 Canvas Circle Text
本文介绍了HTML5 画布圆形文本的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何使用画布创建圆形文本(圆形文本)?
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屋!
查看全文