0

次を使用して、画像に基づいてテキストを入力するプラグインがあります。

function draw() {
        //grab font to use
        var fFamily = $(".activeText a .fontType-cont").val();
        ctx.font = startFontSize + 'px ' + fFamily;
        ctx.fillText(text, 10, 100);

        ctx.globalCompositeOperation = 'source-in';
        ctx.drawImage(img, 10, 20, 500, 100);
}

var canvas = document.getElementById(current),
ctx = canvas.getContext('2d'),
img = document.createElement('img');
//draw it
img.onload = draw;

img.src = $(".activeGColor").find('img').attr('src');

何が起こるかというと、キャンバスがその画像を取得してキャンバスに表示し、テキストが大きくなると、それがテキストの塗りつぶしとして表示されます。私の問題は、それが伸びているように見えないようにするにはどうすればよいですか？そうするオプションはありますか？

あなたのアイデアは何ですか？

4

1 に答える 1

1

ここで何が起こっているかの例を見る必要があります。あなたの質問は、ある種のアニメーションが進行しているように聞こえます...それはフォントサイズをますます大きなサイズに変更します. デフォルトで機能する方法は、テキストが比例してレンダリングされることです。ただし、 ctx.scale() のようなものを使用すると、明らかにそれを捨てることができます。また、フレームごとにキャンバスをクリアしないと、引き伸ばされていると表現される出血効果がさらに大きくなる可能性があります。

于 2013-07-24T18:29:01.293 に答える