对正字母html5画布-Js小提琴示例

Here is a JSFiddle. -字符串的长度越大,右侧添加的空间就越多。

我正在尝试创建一些代码来证明画布上的文本的合理性:

var ctx = this.ctx; // Is now canvas context

var str = 'A random string';

var width = 500; // The size that the string should fit to

var strWidth = this.ctx.measureText(str); // The width in pixels of the string when it's put on canvas

var chars = str.split(''); // Make an array of string

var space = (width - strWidth.width) / (chars.length - 1);

var xpos = 1; // Start of text X position 

this.ctx.clearRect(0,0,750,750);

    var ctx = this.ctx;

Array.each(chars, function(char) {
    ctx.fillText(char, xpos, 1);  
    xpos += space.toInt();          
});

我不希望这些词有正当理由,相反,我希望这些字母有正当理由。

基本上,这会迭代字符串的字符,并将它们绘制到画布上,每个字符之间增加间距以填充一定的宽度。这个代码似乎在右边添加了太多的空格。字符串的字符长度越大,右侧添加的空间就越多。

我认为这可能与 space 变量计算。我试图通过延长每个字符之间的空间,将一个随机长度的字符串放入一个特定的空间。

感谢您的帮助!