html5-javascript画布圆自动半径_Javascript_Html_Css_Canvas

html5-javascript画布圆自动半径

javascript html css canvas

html5-javascript画布圆自动半径,javascript,html,css,canvas,Javascript,Html,Css,Canvas,我正在从事html5/canvas在线邮票创建项目。我的代码在显示顶部圆形和底部圆形文本时效果良好。我在显示中心文本时遇到问题。键入4个字母后，它会重叠。我还想增加圆形半径（包括顶部/底部文本）关于中心文本的类型..这是我的小摆设..还可以找到附加的屏幕截图 <!DOCTYPE HTML> <html> <head> <style> </style> <script src="http://ajax

我正在从事html5/canvas在线邮票创建项目。我的代码在显示顶部圆形和底部圆形文本时效果良好。我在显示中心文本时遇到问题。键入4个字母后，它会重叠。我还想增加圆形半径（包括顶部/底部文本）关于中心文本的类型..这是我的小摆设..还可以找到附加的屏幕截图

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


文本顶部：
删除
文本底部：
删除
横向文本：
var ctx=document.getElementById（'canvas1'）.getContext（'2d'）；
var r=50；
var空间=Math.PI/12；
ctx.font=“bold 30px快递”；
document.getElementById（'text_cnv'）。onkeyup=function（）{
var textLength=（this.value.length）；
如果（文本长度>5）{
半径变化=r+（文本长度*3）；
}否则{
半径变化=r+（文本长度）；
}
textCircle（该值为150，150，半径变化，空格为1）；
document.getElementById（'text_cnv3'）。style.visibility='visible'；
}
document.getElementById（'text_cnv2'）。onkeyup=function（）{
var textLength=（this.value.length）；
如果（文本长度>5）{
半径变化=r+（文本长度*3）；
}否则{
半径变化=r+（文本长度）；
}
textCircle（该值，150，150，半径变化，空格）；
document.getElementById（'text_cnv4'）。style.visibility='visible'；
}
document.getElementById（'text_cnv3'）。onclick=function（）{
文本圈（“”，150，150，0，空格，1）；
$（“#text_cnv”）.val（“”）；
}
document.getElementById（'text_cnv4'）。onclick=function（）{
文本圈（“”，150，150，0，空格）；
$（“#text_cnv2”）.val（“”）；
}
函数drawTextHorizontal（文本、x、y、半径）{
ctx.font=“bold 30px衬线”；
//ctx.textAlign=“中心”；
ctx.fillText（文本，x，y，半径）；
ctx.restore（）；
}
var x_pos=90；
变量y_pos=150；
document.getElementById（'text_horizontal'）。onkeyup=function（）{
var nr_w=（this.value.length）；
var textLength=（nr_w）；
如果（文本长度>5）{
半径变化=r+（文本长度*2）；
}否则{
半径变化=r+（文本长度）；
}
drawTextHorizontal（该值、x位置、y位置、半径变化）；
}
函数文本圆（文本、x、y、半径、空间、顶部）{
ctx.clearRect（0，（顶部？0:y），600，y）；
空间=空间| | 0；
var numRadsPerLetter=（Math.PI-space*2）/text.length；
ctx.save（）；
ctx.translate（x，y）；
变量k=（顶部）？1:-1；
ctx.rotate（-k*（（Math.PI-numradperletter）/2-空格）；
对于（变量i=0；i


我从获得了下面的函数，我只是将它包装到您的函数中，它就可以工作了！！现在不存在重叠问题
这将是您的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);
}

函数wrapText（上下文、文本、x、y、maxWidth、lineHeight）
{
var words=text.split（“”）；
var行=“”；
for（var n=0；nmaxWidth&&n>0）{
填充文本（行，x，y）；
行=字[n]+''；
y+=线宽；
}
否则{
直线=测试线；
}
}
填充文本（行，x，y）；
}

这是您的
如何使圆圈在中间文本的类型上增长？您想使其增长，或者您想将其包裹在圆圈内，直到输入一定长度的文本？？您更新的小提琴仍然有一个问题：例如：文本顶部：现在是时候了，底部：所有好人，水平：来帮助。但是将文本水平包装是个好主意。：-）我希望在中心文本宽度增加当前圆半径后，圆变大。哦，是的@马克！！检查一下！！谢谢你指出这一点！！