Question

我想在HTML5 Canvas上绘制一个字体图像。起初我虽然将每个字母分成不同的图像，但决定使用精灵表更清洁。但问题是，并非所有字母都是相同的大小。有些像素比其他角色宽几个。

在Google上看时，我遇到了一些人处理问题的方法。他们在每个字符下添加了一行代表字符长度，然后将字体图像的最底部行绘制到屏幕外画布并逐个像素地分析它。

Font Example

我试图实现我自己的想法，但却无法实现这一目标。在我将更多时间投入到这个想法之前，我想知道它是否是一个很好的解决方案，或者是否有更好的方法来实现同样的目标。

到目前为止，我有一些我想要整理的小片段，就像这段代码一样：

    getImagePixels: function( image, x, y, width, height ) 
    {
        var canvas = document.createElement('canvas');
        canvas.width = image.width;
        canvas.height = image.height;
        var ctx = canvas.getContext('2d');


        ctx.drawImage( image, 0, 0, image.width, image.height );

        return ctx.getImageData( x, y, width, height );
    }

和这个

    loadFontImage: function( image ) 
    {
        // Draw the bottommost line of this font image into an offscreen canvas
        // and analyze it pixel by pixel.
        // A run of non-transparent pixels represents a character and its width

        this.height = image.height-1;
        this.widthMap = [];
        this.indices = [];

        var px = getImagePixels( image, 0, image.height-1, image.width, 1 );

        var currentChar = 0;
        var currentWidth = 0;

        for( var x = 0; x < image.width; x++ ) 
        {
            var index = x * 4 + 3; // alpha component of this pixel
            if( px.data[index] > 127 ) 
            {
                currentWidth++;
            }
            else if( px.data[index] < 128 && currentWidth ) 
            {
                this.widthMap.push( currentWidth );
                this.indices.push( x-currentWidth );
                currentChar++;
                currentWidth = 0;
            }
        }
    }

Answer 1

我无法发表评论，我只想写下这个答案：

您还可以创建或生成包含所有宽度的javascript对象：

var fontWidths = {
     a: 8,
     b: 8
     ....
};

这样，每当你要在画布上写东西时，开销就不会发生。

从HTML5 Canvas上的Image中绘制字体

1 个答案: