Question

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

感谢任何帮助！

Answer 1

你非常接近，但你只是增加了空间的宽度而忘了添加字符的宽度：

试试这个，它应该有效：

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

<强> MODIFIED FIDDLE HERE

另外，为了更准确，您不应将间距舍入为整数值。 Canvas可以处理子像素，它会产生更好的结果（我在画布中修改了这个以及画布来演示）。

证明字母html5画布 - Js小提琴示例

1 个答案: