我正在研究 html5/canvas 在线邮票创建元素。我的代码可以很好地显示顶部圆形和底部圆形文本。我在显示中心文本时遇到问题。它在您键入 4 个字母后重叠。我也想增加中心文本类型的圆半径(包括顶部/底部文本)..这是我的 Fidddle http://jsfiddle.net/apsvaeoa/ ..还可以找到随附的屏幕截图。 
.
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas1" width="600" height="400" style="float:left;"></canvas>
<div style="float: left; width: 538px;">
<label style="padding-right: 51px;">Text-Top:</label>
<input type="text" id="text_cnv" size="40" maxlength="" />
<button id="text_cnv3" style="visibility:hidden">
Delete
</button>
<label style="padding-right: 32px;">Text-bottom:</label>
<input type="text" id="text_cnv2" size="40" maxlength="" />
<button id="text_cnv4" style="visibility:hidden">
Delete
</button>
<label style="padding-right: 32px;">Text-horizontal:</label>
<input type="text" id="text_horizontal"/>
</div>
<script>
var ctx = document.getElementById('canvas1').getContext('2d');
var r = 50;
var space = Math.PI / 12;
ctx.font = "bold 30px Courier";
document.getElementById('text_cnv').onkeyup = function() {
var textLength = (this.value.length);
if (textLength > 5) {
radiusChaninging = r + (textLength * 3);
} else {
radiusChaninging = r + (textLength);
}
textCircle(this.value, 150, 150, radiusChaninging, space, 1);
document.getElementById('text_cnv3').style.visibility = 'visible';
}
document.getElementById('text_cnv2').onkeyup = function() {
var textLength = (this.value.length);
if (textLength > 5) {
radiusChaninging = r + (textLength * 3);
} else {
radiusChaninging = r + (textLength);
}
textCircle(this.value, 150, 150, radiusChaninging, space);
document.getElementById('text_cnv4').style.visibility = 'visible';
}
document.getElementById('text_cnv3').onclick = function() {
textCircle('', 150, 150, 0, space, 1);
$("#text_cnv").val('');
}
document.getElementById('text_cnv4').onclick = function() {
textCircle('', 150, 150, 0, space);
$("#text_cnv2").val('');
}
function drawTextHorizontal(text, x, y,radius) {
ctx.font = "bold 30px Serif";
// ctx.textAlign = "center";
ctx.fillText(text, x, y,radius);
ctx.restore();
}
var x_pos = 90;
var y_pos = 150;
document.getElementById('text_horizontal').onkeyup = function() {
var nr_w = (this.value.length);
var textLength = (nr_w);
if (textLength > 5) {
radiusChaninging = r + (textLength * 2);
} else {
radiusChaninging = r + (textLength);
}
drawTextHorizontal(this.value, x_pos, y_pos,radiusChaninging);
}
function textCircle(text, x, y, radius, space, top) {
ctx.clearRect(0, ( top ? 0 : y), 600, y);
space = space || 0;
var numRadsPerLetter = (Math.PI - space * 2) / text.length;
ctx.save();
ctx.translate(x, y);
var k = (top) ? 1 : -1;
ctx.rotate(-k * ((Math.PI - numRadsPerLetter) / 2 - space));
for (var i = 0; i < text.length; i++) {
// alert(radius);
ctx.save();
ctx.rotate(k * i * (numRadsPerLetter));
ctx.textAlign = "center";
ctx.textBaseline = (!top) ? "top" : "bottom";
ctx.fillText(text[i], 0, -k * (radius));
ctx.restore();
}
ctx.restore();
}
</script>
</body>
最佳答案
好吧，我从 THIS SOURCE 得到了下面的函数 我只是将它包装到您的函数中并且它起作用了!!现在重叠问题不存在了!
这将是您的drawTextHorizontal 函数
function drawTextHorizontal(text, x, y,radius) {
ctx.font = "bold 30px Serif";
wrapText(ctx,text,x,y,4000,1); //call this
ctx.restore();
}
这是我从上述来源得到的wrapText函数
function wrapText(context, text, x, y, maxWidth, lineHeight)
{
var words = text.split(' ');
var line = '';
for(var n = 0; n < words.length; n++) {
var testLine = line + words[n] + ' ';
var metrics = context.measureText(testLine);
var testWidth = metrics.width;
if (testWidth > maxWidth && n > 0) {
context.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else {
line = testLine;
}
}
context.fillText(line, x, y);
}
这是您的 UPDATED FIDDLE
关于javascript - html5 -javascript Canvas 圆自动半径，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29910022/