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 回答