0

这是一个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变量计算有关。我试图通过延长每个字符之间的空间来将随机长度的字符串放入特定的空间。

任何帮助表示赞赏！

4

1 回答 1

1

您非常接近，但您只添加了空间的宽度并且忘记添加字符的宽度：

试试这个，它应该工作：

xpos += space + ctx.measureText(char).width;

修改后的小提琴在这里

此外，为了更准确，您不应将间距四舍五入为整数值。画布可以处理子像素化，它会产生更好的结果（我在小提琴中修改了这个，也在画布中进行了演示）。

于 2013-09-21T18:12:19.267 回答