blocks|key|895315|text|CircleType.js不使用画布，但实现了相同的效果：http://circletype.labwire.ca+-在流畅布局中也能很好地工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|895316|entityMap|0|LINK|mutability|MUTABLE|url|http://circletype.labwire.ca/^0|T|S|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

CircleType.js doesn't use canvas but achieves the same effect: <a href="http://circletype.labwire.ca" rel="nofollow">http://circletype.labwire.ca</a> - also works well in fluid layouts.

blocks|key|678581|text|一种对字符大小进行计数的版本。因此，字母之间的空格总是相同的大小。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|678582|function+drawTextAlongArc(context,+str,+centerX,+centerY,+radius,+angle)+{
++++var+len+=+str.length,+s,+letterAngle;

++++context.save();
++++context.textAlign+=+'center';
++++context.translate(centerX,+centerY);
++++context.rotate(angle+%2B+Math.PI+/+2);

++++for+(var+n+=+0;+n+<+len;+n%2B%2B)+{
++++++++s+=+str[n];
++++++++letterAngle+=+0.5*(context.measureText(s).width+/+radius);

++++++++context.rotate(letterAngle);
++++++++context.save();

++++++++context.translate(0,+-radius);
++++++++context.fillText(s,+0,+0);
++++++++context.restore();

++++++++context.rotate(letterAngle);
++++}
++++context.restore();
}|code-block|syntax|javascript|678583|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

A version in which the size of characters is counted. The spaces between the letters are therefore always the same size.

<pre><code>function drawTextAlongArc(context, str, centerX, centerY, radius, angle) {
 var len = str.length, s, letterAngle;

 context.save();
 context.textAlign = 'center';
 context.translate(centerX, centerY);
 context.rotate(angle + Math.PI / 2);

 for (var n = 0; n &lt; len; n++) {
 s = str[n];
 letterAngle = 0.5*(context.measureText(s).width / radius);

 context.rotate(letterAngle);
 context.save();

 context.translate(0, -radius);
 context.fillText(s, 0, 0);
 context.restore();

 context.rotate(letterAngle);
 }
 context.restore();
}
</code></pre>

blocks|key|895439|text|在我的博客上，我相当仔细地研究了如何使用HTML5+Canvas创建循环文本：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|895440|html5graphics.blogspot.com|offset|length|895441|在该示例中，选项包括从给定角度四舍五入的文本对齐方式(左、中、右)、向内和向外文本、字距调整(字符之间的间距可调)以及半径内或半径外的文本。|895442|还有一个带有工作示例的jsfiddle。|895443|具体如下：|895444|document.body.appendChild(getCircularText("ROUNDED+TEXT+LOOKS+BEST+IN+CAPS!",+250,+0,+"center",+false,+true,+"Arial",+"18pt",+2));

function+getCircularText(text,+diameter,+startAngle,+align,+textInside,+inwardFacing,+fName,+fSize,+kerning)+{
++++//+text:+++++++++The+text+to+be+displayed+in+circular+fashion
++++//+diameter:+++++The+diameter+of+the+circle+around+which+the+text+will
++++//+++++++++++++++be+displayed+(inside+or+outside)
++++//+startAngle:+++In+degrees,+Where+the+text+will+be+shown.+0+degrees
++++//+++++++++++++++if+the+top+of+the+circle
++++//+align:++++++++Positions+text+to+left+right+or+center+of+startAngle
++++//+textInside:+++true+to+show+inside+the+diameter.+False+to+show+outside
++++//+inwardFacing:+true+for+base+of+text+facing+inward.+false+for+outward
++++//+fName:++++++++name+of+font+family.+Make+sure+it+is+loaded
++++//+fSize:++++++++size+of+font+family.+Don't+forget+to+include+units
++++//+kearning:+++++0+for+normal+gap+between+letters.+positive+or
++++//+++++++++++++++negative+number+to+expand/compact+gap+in+pixels
+//------------------------------------------------------------------------

++++//+declare+and+intialize+canvas,+reference,+and+useful+variables
++++align+=+align.toLowerCase();
++++var+mainCanvas+=+document.createElement('canvas');
++++var+ctxRef+=+mainCanvas.getContext('2d');
++++var+clockwise+=+align+==+"right"+?+1+:+-1;+//+draw+clockwise+for+aligned+right.+Else+Anticlockwise
++++startAngle+=+startAngle+*+(Math.PI+/+180);+//+convert+to+radians

++++//+calculate+height+of+the+font.+Many+ways+to+do+this
++++//+you+can+replace+with+your+own!
++++var+div+=+document.createElement("div");
++++div.innerHTML+=+text;
++++div.style.position+=+'absolute';
++++div.style.top+=+'-10000px';
++++div.style.left+=+'-10000px';
++++div.style.fontFamily+=+fName;
++++div.style.fontSize+=+fSize;
++++document.body.appendChild(div);
++++var+textHeight+=+div.offsetHeight;
++++document.body.removeChild(div);

++++//+in+cases+where+we+are+drawing+outside+diameter,
++++//+expand+diameter+to+handle+it
++++if+(!textInside)+diameter+%2B=+textHeight+*+2;

++++mainCanvas.width+=+diameter;
++++mainCanvas.height+=+diameter;
++++//+omit+next+line+for+transparent+background
++++mainCanvas.style.backgroundColor+=+'lightgray';+
++++ctxRef.fillStyle+=+'black';
++++ctxRef.font+=+fSize+%2B+'+'+%2B+fName;

++++//+Reverse+letters+for+align+Left+inward,+align+right+outward+
++++//+and+align+center+inward.
++++if+(((["left",+"center"].indexOf(align)+>+-1)+&&+inwardFacing)+%7C%7C+(align+==+"right"+&&+!inwardFacing))+text+=+text.split("").reverse().join("");+

++++//+Setup+letters+and+positioning
++++ctxRef.translate(diameter+/+2,+diameter+/+2);+//+Move+to+center
++++startAngle+%2B=+(Math.PI+*+!inwardFacing);+//+Rotate+180+if+outward
++++ctxRef.textBaseline+=+'middle';+//+Ensure+we+draw+in+exact+center
++++ctxRef.textAlign+=+'center';+//+Ensure+we+draw+in+exact+center

++++//+rotate+50%25+of+total+angle+for+center+alignment
++++if+(align+==+"center")+{
++++++++for+(var+j+=+0;+j+<+text.length;+j%2B%2B)+{
++++++++++++var+charWid+=+ctxRef.measureText(text[j]).width;
++++++++++++startAngle+%2B=+((charWid+%2B+(j+==+text.length-1+?+0+:+kerning))+/+(diameter+/+2+-+textHeight))+/+2+*+-clockwise;
++++++++}
++++}

++++//+Phew...+now+rotate+into+final+start+position
++++ctxRef.rotate(startAngle);

++++//+Now+for+the+fun+bit:+draw,+rotate,+and+repeat
++++for+(var+j+=+0;+j+<+text.length;+j%2B%2B)+{
++++++++var+charWid+=+ctxRef.measureText(text[j]).width;+//+half+letter
++++++++//+rotate+half+letter
++++++++ctxRef.rotate((charWid/2)+/+(diameter+/+2+-+textHeight)+*+clockwise);+
++++++++//+draw+the+character+at+"top"+or+"bottom"+
++++++++//+depending+on+inward+or+outward+facing
++++++++ctxRef.fillText(text[j],+0,+(inwardFacing+?+1+:+-1)+*+(0+-+diameter+/+2+%2B+textHeight+/+2));

++++++++ctxRef.rotate((charWid/2+%2B+kerning)+/+(diameter+/+2+-+textHeight)+*+clockwise);+//+rotate+half+letter
++++}

++++//+Return+it
++++return+(mainCanvas);
}|code-block|syntax|javascript|895445|entityMap|0|LINK|mutability|MUTABLE|url|http://html5graphics.blogspot.com/|1|http://jsfiddle.net/rbdszxjv/^0|0|0|Q|0|0|0|B|8|1|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|16|8|@]|9|@$D|17|E|18|1|19]]|A|$]]|$1|J|3|K|5|6|7|1A|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1B|8|@]|9|@]|A|$O|P]]|$1|Q|3|-4|5|6|7|1C|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]|Y|$5|T|U|V|A|$W|Z]]]]

On my blog, I take a fairly close look at creating circular text using HTML5 Canvas:

<a href="http://html5graphics.blogspot.com" rel="nofollow noreferrer">html5graphics.blogspot.com</a>

In the example, options include rounded text alignment (left, center and right) from a given angle, inward and outward facing text, kerning (adjustable gap between characters) and text inside or outside the radius.

There is also a <a href="http://jsfiddle.net/rbdszxjv/" rel="nofollow noreferrer">jsfiddle</a> with a working example.

It is as follows:

<pre><code>document.body.appendChild(getCircularText("ROUNDED TEXT LOOKS BEST IN CAPS!", 250, 0, "center", false, true, "Arial", "18pt", 2));

function getCircularText(text, diameter, startAngle, align, textInside, inwardFacing, fName, fSize, kerning) {
 // text: The text to be displayed in circular fashion
 // diameter: The diameter of the circle around which the text will
 // be displayed (inside or outside)
 // startAngle: In degrees, Where the text will be shown. 0 degrees
 // if the top of the circle
 // align: Positions text to left right or center of startAngle
 // textInside: true to show inside the diameter. False to show outside
 // inwardFacing: true for base of text facing inward. false for outward
 // fName: name of font family. Make sure it is loaded
 // fSize: size of font family. Don't forget to include units
 // kearning: 0 for normal gap between letters. positive or
 // negative number to expand/compact gap in pixels
 //------------------------------------------------------------------------

 // declare and intialize canvas, reference, and useful variables
 align = align.toLowerCase();
 var mainCanvas = document.createElement('canvas');
 var ctxRef = mainCanvas.getContext('2d');
 var clockwise = align == "right" ? 1 : -1; // draw clockwise for aligned right. Else Anticlockwise
 startAngle = startAngle * (Math.PI / 180); // convert to radians

 // calculate height of the font. Many ways to do this
 // you can replace with your own!
 var div = document.createElement("div");
 div.innerHTML = text;
 div.style.position = 'absolute';
 div.style.top = '-10000px';
 div.style.left = '-10000px';
 div.style.fontFamily = fName;
 div.style.fontSize = fSize;
 document.body.appendChild(div);
 var textHeight = div.offsetHeight;
 document.body.removeChild(div);

 // in cases where we are drawing outside diameter,
 // expand diameter to handle it
 if (!textInside) diameter += textHeight * 2;

 mainCanvas.width = diameter;
 mainCanvas.height = diameter;
 // omit next line for transparent background
 mainCanvas.style.backgroundColor = 'lightgray'; 
 ctxRef.fillStyle = 'black';
 ctxRef.font = fSize + ' ' + fName;

 // Reverse letters for align Left inward, align right outward 
 // and align center inward.
 if (((["left", "center"].indexOf(align) &gt; -1) &amp;&amp; inwardFacing) || (align == "right" &amp;&amp; !inwardFacing)) text = text.split("").reverse().join(""); 

 // Setup letters and positioning
 ctxRef.translate(diameter / 2, diameter / 2); // Move to center
 startAngle += (Math.PI * !inwardFacing); // Rotate 180 if outward
 ctxRef.textBaseline = 'middle'; // Ensure we draw in exact center
 ctxRef.textAlign = 'center'; // Ensure we draw in exact center

 // rotate 50% of total angle for center alignment
 if (align == "center") {
 for (var j = 0; j &lt; text.length; j++) {
 var charWid = ctxRef.measureText(text[j]).width;
 startAngle += ((charWid + (j == text.length-1 ? 0 : kerning)) / (diameter / 2 - textHeight)) / 2 * -clockwise;
 }
 }

 // Phew... now rotate into final start position
 ctxRef.rotate(startAngle);

 // Now for the fun bit: draw, rotate, and repeat
 for (var j = 0; j &lt; text.length; j++) {
 var charWid = ctxRef.measureText(text[j]).width; // half letter
 // rotate half letter
 ctxRef.rotate((charWid/2) / (diameter / 2 - textHeight) * clockwise); 
 // draw the character at "top" or "bottom" 
 // depending on inward or outward facing
 ctxRef.fillText(text[j], 0, (inwardFacing ? 1 : -1) * (0 - diameter / 2 + textHeight / 2));

 ctxRef.rotate((charWid/2 + kerning) / (diameter / 2 - textHeight) * clockwise); // rotate half letter
 }

 // Return it
 return (mainCanvas);
}
</code></pre>

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

<img src="https://i.stack.imgur.com/GlQMI.png" alt="Like this">

问HTML5画布圆形文本
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5画布圆形文本EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5画布圆形文本
EN