对齐字母 html5 Js 小提琴示例

Justifing letters html5 Js fiddle example

本文关键字：小提琴 Js html5 对齐      更新时间：2023-09-26

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

任何帮助不胜感激！

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

试试这个，它应该可以工作：

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

修改小提琴在这里

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

相关文章：