相关疑难解决方法(0)

我想知道是否有一种方法可以使用Canvas上下文中的fillText()方法绘制多行文本.我不认为这是可能的,但也许你有一个想法.

有没有办法在一个卡夫纳斯里面画它的所有大小？我已经检查过我可以重复一个图像，但我只想重复一个文本。

另外，如果文本可以每行移动一次，那就太好了。如果我将“1234567”设置为文本，我需要的效果示例：

1234567 1234567 1234567 1234567 1234567 1234567
234567 1234567 1234567 1234567 1234567 1234567 
34567 1234567 1234567 1234567 1234567 1234567 1
4567 1234567 1234567 1234567 1234567 1234567 12
567 1234567 1234567 1234567 1234567 1234567 123
67 1234567 1234567 1234567 1234567 1234567 1234
7 1234567 1234567 1234567 1234567 1234567 12345
 1234567 1234567 1234567 1234567 1234567 123456
1234567 1234567 1234567 1234567 1234567 1234567

我目前有这个http://jsfiddle.net/dgAEY/,它工作得很好,我只需要找出一种方法来确定字体长度太长时的大小.我已经研究了自动大小的动态文本来填充固定大小的容器,我试图应用他们发布的Jquery函数,但我无法让它工作.

HTML

<form action="" method="POST" id="nametag" class="nametag">
    Line1: 
    <input type="text" id="line1" name="line1" style="width:250px;" /><br>
    Line2:
    <input type="text" id="line2" name="line2" style="width:250px;" /><br>
    Line3:
    <input type="text" id="line3" name="line3" style="width:250px;" /><br>
    Line4:
    <input type="text" id="line4" name="line4" style="width:250px;" /><br>

    <br><br><b>Name Tag</b><br>
    <canvas width="282px" height="177px" id="myCanvas" style="border: black thin solid;"></canvas>
</form>

JavaScript的

$(document).ready(function () {
    var canvas = $('#myCanvas')[0];
    var context = canvas.getContext('2d');

    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0);
    };
    imageObj.src = "http://dummyimage.com/282x177/FFF/FFF"; 

    $('#nametag').bind('change keyup …